Как использовать тот же сценарий jQuery на той же странице

Question

Я сделал базу слайдера от carouFredSel.

Когда я использую 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

Если классы для слайдера похожи вы могли бы сделать что-то вроде:

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

Если все ползунки имеют один и тот же класс (.carmod17), то это легко:

$('.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, и вы добавите это 17 к счетчику (sliders.length + 17) (где sliders - ваши ползунки на странице, которые вы можете получить и посчитать).

Надеюсь, это поможет.