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

Question

Я хотел бы сделать слайдер динамическим. Я использую Slider Pro.

Вот моя структура:

JQuery

$(".item-0").mouseover(function() { 
    $('#carousel').sliderPro('gotoSlide', 0); 
}); 
$(".item-1").mouseover(function() { 
    $('#carousel').sliderPro('gotoSlide', 1); 
}); 
$(".item-2").mouseover(function() { 
    $('#carousel').sliderPro('gotoSlide', 2); 
}); 
$(".item-3").mouseover(function() { 
    $('#carousel').sliderPro('gotoSlide', 3); 
}); 

HTML:

<div class="slider-pro" id="carousel"> 
    <ol class="carousel-menu"> 
     <a class="item-0" href="#carousel/0"> 
      <li>Yatching</li> 
     </a> 
     <a class="item-1" href="#carousel/1"> 
      <li>Aviation</li> 
     </a> 
     <a class="item-2" href="#carousel/2"> 
      <li>Automobile</li> 
     </a> 
     <a class="item-3" href="#carousel/2"> 
      <li>Watchmaking</li> 
     </a> 
    </ol> 

    <div class="sp-slides"> 
     <!-- Slide 1 --> 
     <div class="sp-slide"> 
      <img class="sp-image" src="path/to/image1.jpg" /> 
     </div> 

     <!-- Slide 2 --> 
     <div class="sp-slide"> 
      <p>Lorem ipsum dolor sit amet</p> 
     </div> 

     <!-- Slide 3 --> 
     <div class="sp-slide"> 
      <h3 class="sp-layer">Lorem ipsum dolor sit amet</h3> 
      <p class="sp-layer">consectetur adipisicing elit</p> 
     </div> 

     <!-- Slide 4 --> 
     <div class="sp-slide"> 
      <h3 class="sp-layer">Lorem ipsum dolor sit amet</h3> 
      <p class="sp-layer">consectetur adipisicing elit</p> 
     </div> 
    </div> 
</div> 

Я хотел бы, что на зависании на каждом "а" .item-0 мы идем к слайд 0, .item-1 перейдите на слайд 1, .item-2 перейдите на слайд 2 и т. д. Итак, я попробовал что-то более динамичное:

$('.item-' + i).each(function() { 
    $(this).mouseover(function() { 
     $('#carousel').sliderPro('gotoSlide', i); 
    }); 
}); 

Answer 1

1. Используйте общий класс item ко всем элементам вместо item-n, если не возможно, вы можете использовать attribute starts with selector$('[class^=item]'), чтобы выбрать все элементы, класс выбирает с item. Я бы также рекомендовал использовать его как $('#carousel').find('[class^=item]'), чтобы избежать выбора других соответствующих элементов на странице.

2. Вместо того чтобы повторять код для всех элементов по отдельности, добавить общий обработчик событий с index следующим образом:

   $('[class^=item]').mouseover(function() { 
       $('#carousel').sliderPro('gotoSlide', $(this).index()); 
   });