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

StackOverflow https://stackoverflow.com//questions/22016929

Вопрос

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

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

кошмар!кошмар!кошмар! 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);
Это было полезно?

Решение

Вы можете сохранить текущий номер слайда, используя 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() для проверки значений.Также обратите внимание, что пейджер включен при одной настройке и выключен при другой.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top