web-dev-qa-db-ja.com

フクロウカルーセルのクローンアイテム

カルーセルを構築しているときに、フクロウがクローンの複製アイテムを追加することに気付きました。私のフクロウの設定は次のようになります。どうすればこれを防ぐことができますか？.

owlDfe.owlCarousel({
            loop: false,
                        autoWidth:false,
                        nav:false,
                        responsiveClass:true,
                        responsive:{
                            0:{
                                items:sizes.mobile_portrait
                            },
                            568:{
                              items:sizes.mobile_landscape
                            },
                            768:{
                              items:sizes.ipad
                            },
                            800:{
                                items:sizes.desktop
                            },
                            1000:{
                                items:sizes.desktop,
                            }
                        }
          });

owl carousel

owl-carousel
15
Rajat banerjee

私はこの問題を抱えていました-ループオプションをfalseに設定することで解決したことがわかりました。

38
Dan Temple

それで、クリックイベントをクローンされたスライドに渡すことで、このクローンの問題に頭を打っています。

最終的にそれを解決したのは、これらの2つの設定値を設定することです：

loop: false,

rewind: true

これにより、カルーセルはループを繰り返すことができますが、スライドを複製することはできません。

18
Crystal
jQuery('.owl-carousel2').owlCarousel({
    loop:false,
    margin:10,
    nav:true,
    mouseDrag:false,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:3
        }
    }
})

         });

ループを偽にすると、クローン化されたアイテムは作成されません

8
Piyush Dhanotiya

私の場合、私が見つけたのは、items: 4、アイテムの量はそれより少なかったため、複製が複製されました。

1
Maarten Wolfsen

これらの答えはすべて根本的な問題を解決しますが、ループを使用することはできません:(

必要に応じてデータを更新することで、ループとクリックの動作を維持することができたため、フクロウが要素を複製する必要はありませんでした。

var toClone = Object.keys(owlConfig.responsive).length - slides;
if(toClone > 0) {
    slides= [...slides, ...slides.splice(0, toClone)];
}
// initialize carousel here
0
Crhistian Ramirez