0

问：我正在尝试重新加载滑块以获得完全响应的布局。为此，我需要重新加载滑块！主要问题是滑块会因为重新加载而改变。所以每次我调整大小时，它都是从第一张幻灯片开始的。

谁能指出我在重新加载/调整大小时没有这种幻灯片跳跃的解决方案？？？

噩梦！噩梦！噩梦！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);
4

1 回答 1

2

您可以使用存储当前幻灯片编号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 不会使用您在小提琴中添加的 CDN 链接加载 bxslider。

  2. 当您使用自己的类时，请始终传递useCSS:false给 bxSlider 对象，否则您可能会看到一些随机行为。

  3. 您可以取消注释中的注释行tourLandingScript()以验证值。另请注意，寻呼机在一种设置中处于打开状态，而在另一种设置中处于关闭状态。

于 2014-02-25T17:05:08.037 回答