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

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

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

Кошмар! Кошмар! Кошмар! 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);

jquery bxslider responsive-slides
person user2505665    schedule 25.02.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете сохранить текущий номер слайда, используя 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>

ПС:

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

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

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

person DhruvJoshi    schedule 25.02.2014
comment
спасибо за ответ, но он все еще плохо изменяется. каждый раз, когда я изменяю размер ползунка, начинайте с цифры o - person user2505665; 27.02.2014
comment
this.getCurrentSlide не является функцией startnum=this.getCurrentSlide(); - person user2505665; 27.02.2014
comment
@user2505665 Ага! Тут ты меня подловил. Я обновлю свой ответ. Надеюсь, то, что я сделал, сработало для вас. - person DhruvJoshi; 27.02.2014
comment
все еще ошибка: currentSlideNumber.getCurrentSlide не является функцией startnum=currentSlideNumber.getCurrentSlide(); - person user2505665; 27.02.2014
comment
если бы вы все еще там было бы прекрасно, если бы вы могли помочь мне исправить это. настройки должны работать, не видя перезагрузки при изменении размера как предназначенного для отклика. - person user2505665; 27.02.2014
comment
@user2505665 user2505665 Я обновил свой ответ рабочей демонстрацией. Пожалуйста, проверьте это. - person DhruvJoshi; 28.02.2014
comment
давайте продолжим это обсуждение в чате - person user2505665; 28.02.2014
comment
привет, почти там мы будем болтать? - person user2505665; 28.02.2014
comment
Вы там не могли бы вы взглянуть на это? - person user2505665; 28.02.2014
comment
Пытались использовать slider.redrawSlider(); при изменении размера окна? Я только что протестировал его, и он работает очень хорошо. - person ElaAle; 03.07.2015