Ползунок миниатюры не работает

Question

У меня есть ползунок Thumbnail, но это не работает правильно. Когда я нажимаю определенное изображение большого пальца, основные изображения повторяются, появляется одно и то же изображение.

Любой человек может помочь мне решить эту

Соответствующий URL: http://jsfiddle.net/danoftheman/C3Sr3/1/

$(document).ready(function() { 
 
    $(function() { 
 
    // If there are gallery thumbs on the page 
 
    if ($('#gallery-thumbs').length > 0) { 
 
     // Cache the thumb selector for speed 
 
     var thumb = $('#gallery-thumbs').find('.thumb'); 
 
     // How many thumbs do you want to show & scroll by 
 
     var visibleThumbs = 4; 
 
     // Put slider into variable to use public functions 
 
     var gallerySlider = $('#gallery').bxSlider({ 
 
     controls: false, 
 
     pager: false, 
 
     easing: 'easeInOutQuint', 
 
     infiniteLoop: true, 
 
     speed: 500, 
 
     onAfterSlide: function(currentSlideNumber) { 
 
      thumb.removeClass('pager-active'); 
 
      thumb.eq(currentSlideNumber).addClass('pager-active'); 
 
     }, 
 
     onNextSlide: function(currentSlideNumber) { 
 
      slideThumbs(currentSlideNumber, visibleThumbs); 
 
     }, 
 
     onPrevSlide: function(currentSlideNumber) { 
 
      slideThumbs(currentSlideNumber, visibleThumbs); 
 
     } 
 
     }); 
 
     // When clicking a thumb 
 
     thumb.click(function(e) { 
 
     // -6 as BX slider clones a bunch of elements 
 
     gallerySlider.goToSlide($(this).closest('.thumb-item').index() - 6); 
 
     // Prevent default click behaviour 
 
     e.preventDefault(); 
 
     }); 
 
     // Function to calculate which slide to move the thumbs to 
 
     function slideThumbs(currentSlideNumber, visibleThumbs) { 
 
      // Calculate the first number and ignore the remainder 
 
      var m = Math.floor(currentSlideNumber/visibleThumbs); 
 
      // Multiply by the number of visible slides to calculate the exact slide we need to move to 
 
      var slideTo = m * visibleThumbs; 
 
      // Tell the slider to move 
 
      thumbsSlider.goToSlide(slideTo); 
 
     } 
 
     // When you click on a thumb 
 
     $('#gallery-thumbs').find('.thumb').click(function() { 
 
     // Remove the active class from all thumbs 
 
     $('#gallery-thumbs').find('.thumb').removeClass('pager-active'); 
 
     // Add the active class to the clicked thumb 
 
     $(this).addClass('pager-active'); 
 
     }); 
 
     // Thumbnail slider 
 
     var thumbsSlider = $('#gallery-thumbs').gbxSlider({ 
 
     controls: true, 
 
     pager: false, 
 
     easing: 'easeInOutQuint', 
 
     displaySlideQty: visibleThumbs, 
 
     moveSlideQty: visibleThumbs, 
 
     infiniteLoop: false, 
 
     slideWidth: 200, 
 
     minSlides: 4, 
 
     maxSlides: 4, 
 
     slideMargin: 10 
 
     }); 
 
    } 
 
    }); 
 
});

.gallery-container { 
 
    width: 350px; 
 
    height: 300px; 
 
} 
 
.gallery-thumbs-container { 
 
    width: 350px; 
 
    height: 300px; 
 
}

<link href="http://www.danmanning.co.uk/dev/bxslider/gallery/css/jquery.bxslider.css" rel="stylesheet" /> 
 
<link href="http://www.danmanning.co.uk/dev/bxslider/gallery/css/gallery.bxslider.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="http://www.danmanning.co.uk/dev/bxslider/gallery/js/gallery.bxslider.js" type="text/javascript"></script> 
 
<script src="http://www.danmanning.co.uk/dev/bxslider/gallery/js/jquery.bxslider.js" type="text/javascript"></script> 
 

 
<div class="gallery-container"> 
 
    <div id="gallery" class="gallery-images"> 
 
    <img src="http://almonard.co.in/images/products/domestic/ceiling/metalic-silver-blue.jpg" alt="" /> 
 
    <img src="http://almonard.co.in/images/products/domestic/ceiling/metalic-cherry-red.jpg" alt="" /> 
 
    <img src="http://almonard.co.in/images/products/domestic/ceiling/metalic-ivory.jpg" alt="" /> 
 
    <img src="http://almonard.co.in/images/products/domestic/ceiling/new-super-delux-white.jpg" alt="" /> 
 
    <img src="http://almonard.co.in/images/products/domestic/ceiling/new-super-delux-brown.jpg" alt="" /> 
 
    </div> 
 
    <div class="gallery-thumbs-container"> 
 
    <ul id="gallery-thumbs" class="gallery-thumbs-list"> 
 
     <li class="thumb-item"> 
 
     <div class="thumb"> 
 
      <a href=""> 
 
      <img src="http://almonard.co.in/images/products/domestic/ceiling/thumbs/metalic-silver-blue.jpg" alt="" /> 
 
      </a> 
 
     </div> 
 
     </li> 
 
     <li class="thumb-item"> 
 
     <div class="thumb"> 
 
      <a href=""> 
 
      <img src="http://almonard.co.in/images/products/domestic/ceiling/thumbs/metalic-cherry-red.jpg" alt="" /> 
 
      </a> 
 
     </div> 
 
     </li> 
 
     <li class="thumb-item"> 
 
     <div class="thumb"> 
 
      <a href=""> 
 
      <img src="http://almonard.co.in/images/products/domestic/ceiling/thumbs/metalic-ivory.jpg" alt="" /> 
 
      </a> 
 
     </div> 
 
     </li> 
 
     <li class="thumb-item"> 
 
     <div class="thumb"> 
 
      <a href=""> 
 
      <img src="http://almonard.co.in/images/products/domestic/ceiling/thumbs/new-super-delux-white.jpg" alt="" /> 
 
      </a> 
 
     </div> 
 
     </li> 
 
     <li class="thumb-item"> 
 
     <div class="thumb"> 
 
      <a href=""> 
 
      <img src="http://almonard.co.in/images/products/domestic/ceiling/thumbs/new-super-delux-white.jpg" alt="" /> 
 
      </a> 
 
     </div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 1

Update эта линия

gallerySlider.goToSlide($(this).closest('.thumb-item').index() -6); 

в

gallerySlider.goToSlide($(this).closest('.thumb-item').index()); 

http://jsfiddle.net/C3Sr3/23/