bxslider reloadSlider перезагружает слайдер и тормозит цикл

Q. Я пытаюсь перезагрузить слайдер, чтобы получить полностью адаптивный макет. Для этого мне нужно перезагрузить слайдер! главная проблема в том, что слайдер меняется, потому что перезагружается. Так что он начинается с первого слайда каждый раз, когда я изменяю размер.

Кто-нибудь может указать мое решение, чтобы не иметь этот скачок слайдов при перезагрузке / изменении размера???

кошмар! кошмар! кошмар! http://jsfiddle.net/j3hgA/17/

// initiates responsive slide gallery           
var settings = function () {
    var settings1 = {
        pager: 'false',
        minSlides: 1,
        maxSlides: 1,
        startSlide: 1,
        moveSlides: 1,

        onSlideBefore:

        function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
            $('#carousel > li.active').removeClass('active');
            $('#carousel > li').eq(currentSlideHtmlObject - 1).addClass('active');
        },

        onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
            $('#carousel > li.active').removeClass('active');
            $('#carousel > li').eq(currentSlideHtmlObject + 1).addClass('active');
        },

        onSliderLoad: function (currentSlideHtmlObject) {
            $('#carousel').removeClass('settings2');
            $('#carousel').css('display', 'block').addClass('settings1');
            $('#carousel').fadeIn('slow');
            $('#carousel > li.active').removeClass('active');
            $('#carousel > li').eq(currentSlideHtmlObject + 1).addClass('active');

            $('.bx-controls').hover(

            function () {
                $('#carousel li a figure').addClass("hover").end();
            },

            function () {
                $('#carousel li a figure').removeClass("hover").end();
            });

        }

    };
    var settings2 = {
        pager: 'true',
        minSlides: 1,
        maxSlides: 3,
        startSlide: 0,
        moveSlides: 1,
        onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
            $('#carousel > li.active').removeClass('active');
            $('#carousel > li').eq(currentSlideHtmlObject - 1).addClass('active');
        },

        onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
            $('#carousel > li.active').removeClass('active');
            $('#carousel > li').eq(currentSlideHtmlObject + 1).addClass('active');
        },

        onSliderLoad: function (currentSlideHtmlObject) {
            $('#carousel').removeClass('settings1');
            $('#carousel').css('display', 'block').addClass('settings2');
            $('#carousel').fadeIn('slow');
            $('#carousel > li.active').removeClass('active');
            $('#carousel > li').eq(currentSlideHtmlObject + 1).addClass('active');

            $('.bx-controls').hover(

            function () {
                $('#carousel li a figure').addClass("hover").end();
            },

            function () {
                $('#carousel li a figure').removeClass("hover").end();
            });

        }
    };
    return ($(window).width() < 1600) ? settings1 : settings2;
}

var mySlider;

function tourLandingScript() {
    mySlider.reloadSlider(settings());
}

mySlider = $('#carousel').bxSlider(settings());
$(window).resize(tourLandingScript);
Источник

1 ответ

Решение

Вы можете сохранить текущий номер слайда, используя getCurrentSlide() и использовать это как старт startSlide,

Теперь метод getCurrentSlide() может вызываться только для объекта bxSlider. Поэтому он должен быть вызван после инициализации bxSlider, иначе он даст undefined значение. Что и случилось раньше. Поэтому я пошел дальше и изменил часть вашего кода, чтобы создать этот рабочий пример.

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="jquery.bxslider.css" rel="stylesheet" />
<script>
$(document).ready(function(){
    var startnum=0,mySlider, settings1 = {
        pager:true,
        startSlide: 0,
        auto:false,
        useCSS:false,
        onSlideBefore:function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {},
        onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {},
        onSliderLoad: function (currentSlideHtmlObject) {}
    }, settings2 = {
        pager: false,
        startSlide: 0,
        auto:false,
        useCSS:false,
        onSlideBefore:function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {},
        onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {},
        onSliderLoad: function (currentSlideHtmlObject) {}
    };
    function settings() {return ($(window).width() < 1200) ? settings1:settings2;}
    mySlider=$('.bxslider').bxSlider(settings());
    function tourLandingScript() { 
        //alert(settings() +"   "+ mySlider.getCurrentSlide());
        mySlider.reloadSlider($.extend(settings(),{startSlide:mySlider.getCurrentSlide()}));
    }
    $(window).resize(tourLandingScript);
});
</script>
</head>
<body>
<ul class="bxslider" >
    <li><img src="http://www.learningrx.com/images/cognitive-definition.jpg"/></li>
    <li><img src="http://designshack.co.uk/wp-content/uploads/multibkg-3.jpg" /></li>
    <li><img src="http://designshack.co.uk/wp-content/uploads/multibkg-2.jpg" /></li>
    <li><img src="http://designshack.co.uk/wp-content/uploads/multibkg-4.jpg" /></li>

</ul>
</body>
</html>

PS:

  1. jsfiddle не загружает bxslider по ссылке CDN, которую вы добавили в скрипте.

  2. Когда вы используете свои собственные классы, всегда проходите useCSS:falseк объекту bxSlider, в противном случае вы можете увидеть случайное поведение.

  3. Вы можете раскомментировать закомментированную строку в tourLandingScript() для проверки значений. Также обратите внимание, что пейджер включен в одной настройке и выключен в другой.

Источник
Другие вопросы по тегам