同じページに同じjQueryスクリプトを使用する方法

Question

私はcarouFredSelからスライダベースを作成しました。

1つのページで1つのスライダを使用すると、完全に機能します。 しかし、私は同じページに2つのスライダを使用する場合、それはめちゃくちゃます（第1スライダが正常に動作しますが、第2のスライダは機能しません。）

ここに私のスクリプト：

<script> 
    if ($('.carmod17').length) { 
     $('.carmod17').carouFredSel({ 
      responsive: true, 
      pagination: "#fooitemcatcar2", 
      prev: '#prevmod17', 
      next: '#nextmod17', 
      auto: true, 
      scroll: { 
       duration: 1500, 
       pauseOnHover: true 
      }, 
      items: { 
       height: 'variable', 
       visible: { 
        min: 1, 
        max: 1 
       } 
      } 
     }); 
    } 
</script> 

jsfiddleでの作業コード下記の通りです。

JSFIDDLE

は本当にあなたの助けをお願い申し上げます。

ありがとうございます。

Answer 1

スライダーのためのクラスが類似している場合は、のような何かができる：すべてのスライダーが同じクラス（.carmod17）をお持ちの場合

$('[class*="carmod"]').each(function(){ 
    $(this).carouFredSel({...}); 
}); 

それは簡単です：最初に

$('.carmod17').each(function(){ 
    $(this).carouFredSel({...}); 
}); 

名前にcarmodが含まれるすべてのクラスをターゲティングしている場合です。これで、スライダを初期化するラッパーだけに、そのような種類のクラスがあることを確認する必要があります。他のDOM要素の中にcarmodが含まれているクラスがあり、それをスライダにしたくない場合、これは機能しません。

あなたのスライダーが持っていることがわかっている場合など、クラスのような.carmod17、.carmod18、.carmod19そして、あなたはそれらのスライダーがいくつあるか確認し、ループのためにそれを置くためにカウンタを設定することができます

for(var i = 0; i < sliders.length; i++){ 
    $('.carmod'+i).carouFredSel({...}); 
} 

今度は17から始まるかどうかによって、var i = 17となります。これをカウンタ(sliders.length + 17)に追加します（ここではslidersは、フェーダーとカウントできるスライダーです）。

これは少し役に立ちます。