The site uses the owl carousel slider. When the screen resolution is different, the slider looks and works differently, therefore when you change the width of the browser window at certain window sizes, the slider is reinitialized:

var ReviewsSlider = $(".reviews_slider"); function ReviewsSliderInit() { var rBlockWidth = $("#reviews .review_photo_block").width(); ReviewsSlider.trigger("destroy.owl.carousel").removeClass("owl-carousel owl-loaded"); ReviewsSlider.find(".owl-stage-outer").children().unwrap(); if (rBlockWidth == 160) { ReviewsSlider.owlCarousel({ items: 1, loop: true, mouseDrag: false, touchDrag: false, dots: false, nav: true, navText: "", animateOut: "slideOutUp", animateIn: "slideInUp", onInitialized: function() { setTimeout(function() { var height = $("#reviews").height(); $("#reviews .review_slide").css("height", height+"px"); },500); } }).on("change.owl.carousel", function(eventData) { if(eventData.property.name !== "position") return; var data = $(this).data("owlCarousel"), current = data.current(), next = eventData.property.value; data.settings.animateOut = next > current ? "slideOutUp" : "slideOutDown"; data.settings.animateIn = next > current ? "slideInUp" : "slideInDown"; }); } else { $("#reviews .review_slide").css("height", "auto"); ReviewsSlider.owlCarousel({ items: 1, smartSpeed: 500, loop: true, mouseDrag: false, touchDrag: false, dots: false, nav: true, navText: "", autoHeight: true, onInitialized: function() { setTimeout(function() { $("#reviews .owl-height").css("height", "auto"); var height = $("#reviews .owl-height .active").height(); $("#reviews .owl-height").css("height", height+"px"); },500); } }); } } var ReviewsSliderTimeout; ReviewsSliderInit(); $(window).resize( function() { clearTimeout(ReviewsSliderTimeout); ReviewsSliderTimeout = setTimeout(ReviewsSliderInit, 500); });

The problem is that the slider is re-initialized with any resizing of the window, even if the condition has not changed. How to make the slider change only when the condition changes? For example, we change the size of the browser window, as soon as we have satisfied the condition rBlockWidth == 160, the slider is reinitialized, and not reinitialized, if we further increase the width of the window. Also on the decrease.

  • So a little hard to understand. Can you fill in all the slider code (css, html ...)? - Yuri
  • Try playing $(window).resize( function() {...}); . Because it is in it that functions are called when the browser is resized - Yuri
  • This is understandable :-) I can not figure out how to perform the function 1 time when changing the width of the block that is specified in the condition. It is necessary to somehow determine that the width of the block has changed. - Frontender
  • When you open the page, write down the width of the block. Then compare the condition, if the width has changed, then the function is executed (and here you need to overwrite the value where you recorded the width when loading the page), if not changed, then do nothing - Yuri
  • Understood thanks. - Frontender

0