javascript - 缩略图 slider 不起作用

Question

我有一个缩略图 slider ，但它无法正常工作，当我单击特定的缩略图时，主图像会重复出现相同的图像。

任何人都可以帮我解决这个问题

相关网址: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

更新此行

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

至

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

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