Моя любимая javascript Карусель не работает должным образом

Question

Я пытаюсь реализовать карусель с Javascript, но у меня проблемы с кнопками навигации.

Пред и Следующая работает хорошо, но навигационные точки, как я звоню не являются.

Кроме того, я хочу показать заголовок изображений на span в соответствии с HTML на jsfiddle. Вы можете увидеть мою попытку в файле javascript ниже следующего комментария.

// show the title of the image when hovering the associated dot. 

Это javascript. Другие файлы могут быть показаться на jsfiddle

$(document).ready(function() { 

    var carouselItems = [ 
     { src: "http://placehold.it/600x300/cccccc/000000", title: "Sample 01" }, 
     { src: "http://placehold.it/600x300/f45a45/000000", title: "Sample 02" }, 
     { src: "http://placehold.it/600x300/b78d65/000000", title: "Sample 03" }, 
     { src: "http://placehold.it/600x300/666aa0/000000", title: "Sample 04" }, 
     { src: "http://placehold.it/600x300/cccddd/000000", title: "Sample 05" } 
    ]; 

    Carousel = function() { 
     // keep track of the current position 
     var position = 0; 

     // build carousel based on items in the carouselItems array 
     $(carouselItems).each(function(index, value){ 
      var li = $('<li/>'); 
      li.addClass('carousel-item'); 
      li.css('width', 100/carouselItems.length + '%'); 
      li.appendTo($('#carousel')); 

      var img = $('<img/>'); 
      img.attr('src', value.src); 
      img.appendTo(li); 

      var liDot = $('<li/>'); 
      liDot.addClass('carousel-dots-nav-item').html('o'); 
      liDot.appendTo($('#carousel-dots-nav')); 
     }); 

     // increase width of the carousel 
     $('#carousel').css('width', carouselItems.length * 100 + '%'); 

     // add events to dots 
     for (i = 0; i < $('.carousel-dots-nav-item').length; i++) { 
      var dot = $('.carousel-dots-nav-item')[i]; 

      // show the title of the image when hovering the associated dot 
      $(dot).hover(function(e){ 
       $('#title').text(carouselItems[i].title); 
      }, function(e){ 
       $('#title').text(''); 
      }); 

      // move to the appropriate slide when a dot is clicked 
      $(dot).click(function(e){ 
       position = i; 
       $('#carousel').animate({ 
        left: -position * 100 + '%' 
       }, 500); 
      }); 
     } 

     // add click event to next button 
     $("#next").click(function(e){ 
      e.preventDefault(); 

      if (position == carouselItems.length - 1) return; 

      position++; 
      $('#carousel').animate({ 
       left: -position * 100 + '%' 
      }, 500); 
     }); 

     // add click event to previous button 
     $("#previous").click(function(e){ 
      e.preventDefault(); 

      if (position == 0) return; 

      position--; 
      $('#carousel').animate({ 
       left: -position * 100 + '%' 
      }, 500); 
     }); 
    }; 

    var carousel = new Carousel(); 
}); 

jsfiddle

Answer 1

В этом цикле:

for (i = 0; i < $('.carousel-dots-nav-item').length; i++) { 
    var dot = $('.carousel-dots-nav-item')[i]; 
    /*...*/ 

    // move to the appropriate slide when a dot is clicked 
    $(dot).click(function(e){ 
     position = i; 
     $('#carousel').animate({ 
      left: -position * 100 + '%' 
     }, 500); 
    }); 
} 

Вы используете i для определения позиции. Но все, что находится в функции щелчка, не выполняется внутри цикла, но когда вы нажимаете на элемент точки. Таким образом, i равно $('.carousel-dots-nav-item').length. И вам повезло, что он определил его глобально.

fiddle

Решение состоит в том, чтобы сохранить положение каждого элемента в атрибуте данных позиции. Поскольку вы используете jquery, я также использовал его:

// 
      var liDot = $('<li/>'); 
      liDot.data("position", index); 
      liDot.addClass('carousel-dots-nav-item').html('o'); 
      liDot.appendTo($('#carousel-dots-nav')); 

// 
      $(dot).click(function(e){ 
       var position= $(this).data('position'); 
       $('#carousel').animate({ 
        left: -1*position * 100 + '%' 
       }, 500); 
      });