Создать динамический слайдер jquery

Question

Я использовал простой слайдер на странице, но я хочу поместить другой слайдер на той же странице. Теперь у меня проблема, если я использую div с тем же идентификатором или классом, это не работает.

пример:-

  <div class="slider">
    <ul>        
      <li><a href="#"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
      <li><a href="#"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
      <li><a href="#"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>      
    </ul>
  </div>

если я использую тот же класс на той же странице, это не сработало. Пожалуйста, помогите мне, как управлять одним и тем же слайдером несколько раз на одной странице.

Answer 1

Если вы используете этот метод в своем коде JavaScript,

$("#slider").easySlider({
     auto: true,
     continuous: true 
});

Затем создайте

<div id="slider" class="slider">
  <ul>        
    <li><a href="#"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
    <li><a href="#"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
    <li><a href="#"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>      
  </ul>
</div>
<div id="slider_new" class="slider">
  <ul>        
    <li><a href="#"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
    <li><a href="#"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
    <li><a href="#"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>      
  </ul>
</div>

Затем добавьте слайд JavaScript два раза, как,

$("#slider").easySlider({
    auto: true,
    continuous: true 
});
$("#slider_new").easySlider({
    auto: true,
    continuous: true 
});

Это должно работать. Я предполагаю, что вы используете это