0

На сайте используется слайдер owl carousel. При разном разрешении экрана слайдер выглядит и работает по разному, поэтому при изменении ширины окна браузера при определенных размерах окна слайдер переинициализируется:

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);
    });

Проблема в том, что слайдер переинициализируется при любом изменении размера окна, даже если не произошло изменение условия. Как сделать так, чтобы слайдер изменялся только при изменении условия? Например, изменяем размер окна браузера, как только у нас выполнилось условие rBlockWidth == 160, слайдер переинициализировался, и не переинициализируется, если мы и дальше увеличиваем ширину окна. Также и на уменьшение.

5
  • Так немного сложновато разобраться. Можете залить весь код слайдера (css, html...)?
    – Yuri
    2 янв 2017 в 9:00
  • Попробуйте поиграться в $(window).resize( function() {...});. Потому что именно в нём вызываются функции при изменении размера браузера
    – Yuri
    2 янв 2017 в 9:04
  • Это понятно :-) Я не могу сообразить, как выполнить функцию 1 раз при изменении ширины блока, который указан в условии. Нужно как-то определить, что у блока изменилась ширина.
    – Frontender
    2 янв 2017 в 9:07
  • При открытии страницы, записывайте ширину блока. Потом в условии сравнимайте, если ширина изменилась, то идёт выполнение функции (и тут нужно перезаписать значение, куда вы записывали ширину при загрузке страницы), если не изменилась, то ничего не делать
    – Yuri
    2 янв 2017 в 9:10
  • Понял, спасибо.
    – Frontender
    2 янв 2017 в 9:28

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.