javascript - BxSlidermaxslideおよびminslide

Question

つまり、基本的に、27個のサムネイルを備えたBxSliderを使用しています。それぞれにライトボックスがロードされているため、すべての画像を確認できます。

これでスクリプトをロードすると、次のようになります。

$('ul#items').bxSlider({
          minSlides: 5,
          maxSlides: 5,
          slideWidth: '920px'
        });

スライダーのすべてのページで5つのサムネイルを取得する必要があります。したがって、最後のページでは、最後の3つのサムネイルが最初の3つ繰り返されています。

問題を解決する代わりに、これを使用してみましたが、

$('ul#items').bxSlider({
          minSlides: 1,
          maxSlides: 5,
          slideWidth: '920px'
        });

ただし、minSlidesとして1を入力すると、スライドごとに最大5つを指定した場合でも、スクリプトは1ページあたり1つ（1つのサムネイルの27ページ）のスライドしか配置しないようです。

この問題を解決する方法はありますか？どうもありがとう！

score 3 · Accepted Answer

例3を見ると、発生している問題が説明されています。slideWidthプロパティはコンテナよりも大きく設定されているため、スライドを拡大縮小できるように、デフォルトでminSlideプロパティに設定されています。

「ここでは、slideWidthを使用可能なスペースよりも大きく設定しました。この場合、スライダーはデフォルトでminSlide値になり、適切に拡大縮小されます。」--bxsliderの例3の説明

探している効果を得るには、max-width値をslideWidthプロパティとして設定する必要があります。このようにして、ビューポートで許可されているように、画面でminSlideとmaxSlideを切り替えることができます。これは例4で示されています。

自分で理解するのに時間がかかったので、これがお役に立てば幸いです。

$('ul#items').bxSlider({
    slideWidth: 200,
    minSlides: 1,
    maxSlides: 5,
    slideMargin: 10
});

score 0 · Accepted Answer

これを試して

$('ul#items').bxSlider({
          minSlides: 1,
          maxSlides: 5,
          slideWidth: '920px',
          infiniteLoop: false
        });

2 に答える 2