1

ここから一種のカルーセル (bxslider) を使用していますhttp://bxslider.com/

スライダーを再度呼び出すと問題が発生しました。画像をスライドさせる動作は奇妙です。前進する時も後退する時もあります。ただし、一度だけ呼び出された場合、動作は問題ありません。以下は私のhtmlとスクリプトです。jsfiddle hereも提供しました

HTML

<ul class="bxslider">
  <li><img src="http://bxslider.com/images/730_200/hill_trees.jpg" /></li>
  <li><img src="http://bxslider.com/images/730_200/me_trees.jpg" /></li>
  <li><img src="http://bxslider.com/images/730_200/houses.jpg" /></li>
</ul>

脚本

var slider=$('.bxslider').bxSlider({
  auto: true
});
slider.destroySlider();
slider.startAuto();
4

2 に答える 2

2

次のようにスライダーをリロードできます。

slider.reloadSlider();

リロード時に新しいオプションを追加することもできます。詳細については、ドキュメントを参照してください。


私の場合、それは仕事をしませんでした。画面の幅に応じてさまざまなオプションをレスポンシブにロードするには、スライダーが必要でした。最もクリーンまたは最もエレガントなソリューションではありませんが、私がしたことは次のとおりです。

var slider = { };
var sliderActive = false;
var sliderSize = " ";

$(window).resize(function(){
    if($(window).width() > 740 && sliderSize != 'large') {
        if(sliderActive === true) {
            slider.reloadSlider({
                minSlides: 2,
                maxSlides: 2,
                slideWidth: 570,
                slideMargin: 30,
                controls: true,
                pager: false,
                moveSlides: 1,
                auto: true,
                onSliderLoad: function(){
                    sliderSize = 'large';
                }
            });
        } else if(sliderActive === false) {
            slider = $(".bxslider").bxSlider({
                minSlides: 2,
                maxSlides: 2,
                slideWidth: 570,
                slideMargin: 30,
                controls: true,
                pager: false,
                moveSlides: 1,
                auto: true,
                onSliderLoad: function(){
                    sliderActive = true;
                    sliderSize = 'large';
                }
            });
        } 
    } else if($(window).width() <= 740 && sliderSize != 'small') {
        if(sliderActive === true) {
            slider.reloadSlider({
                controls: true,
                pager: false,
                auto: true,
                onSliderLoad: function(){
                    sliderSize = 'small';
                }
            });
        } else if(sliderActive === false) {
            sliderActive = true;
            slider = $('.bxslider').bxSlider({
                controls: true,
                pager: false,
                auto: true,
                onSliderLoad: function(){
                    sliderActive = true;
                    sliderSize = 'small';
                }
            });
        }
    }
});

// Call window resize to fire the function on document ready
$(window).resize();

ブレークポイントは 740px です。reloadSlider() と bxSlider() の両方にオプションを 2 回含める必要があるため、コードはかなり肥大化しています。他にどうすればいいのかわかりません。

于 2014-07-23T16:00:03.303 に答える
0

私は同じ問題を抱えていて、このように修正しました。基本的に、スライダーの親に bx-viewport クラスがあるかどうかをチェックして、bxslider がロードされてから破棄されるようにします。

HTML 

<ul class="bxslider">
  <li><img src="http://bxslider.com/images/730_200/hill_trees.jpg" /></li>
  <li><img src="http://bxslider.com/images/730_200/me_trees.jpg" /></li>
  <li><img src="http://bxslider.com/images/730_200/houses.jpg" /></li>
</ul>

JS

var slider=$('.bxslider').bxSlider({
  auto: true
});
if (slider.parent().hasClass('bx-viewport')){
    slider.destroySlider();
    slider.startAuto();
}
于 2018-04-27T10:16:02.257 に答える