0

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);
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:falsebxSlider オブジェクトに渡してください。そうしないと、ランダムな動作が見られる場合があります。

  3. コメント行のコメントを外して、tourLandingScript()値を確認できます。また、ポケットベルはある設定ではオンで、別の設定ではオフになっていることに注意してください。

于 2014-02-25T17:05:08.037 に答える