Question

当我复制所有这些代码时，所有文件Java脚本和CSS文件都已链接，但显示不准确。其结果在Jsfiddle中显示准确，但是当我在webstorm中运行时，它显示为不是滑块。

同一代码是jsfiddle中给出的副本，并且还附加了.js文件和.css文件，但无法正常工作。 Click Here

$(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;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<link rel="stylesheet" href="Slider.css"/>
  <script rel="script" src="Slider.js"></script>
  <script src="jquery.min.js" rel="script"></script>
<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="http://www.danmanning.co.uk/dev/bxslider/gallery/js/jquery.bxslider.js"></script>
<script src="http://www.danmanning.co.uk/dev/bxslider/gallery/js/gallery.bxslider.js"></script>
 

</head>
<body>
<div class="gallery-container">
  <div id="gallery" class="gallery-images">
    <img src="http://placehold.it/325x250&text=Slide1" alt="" />
    <img src="http://placehold.it/325x250&text=Slide2" alt="" />
    <img src="http://placehold.it/325x250&text=Slide3" alt="" />
    <img src="http://placehold.it/325x250&text=Slide4" alt="" />
    <img src="http://placehold.it/325x250&text=Slide5" 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://placehold.it/100&text=Slide1" alt="" /></a>
        </div>
      </li>
      <li class="thumb-item">
        <div class="thumb">
          <a href=""><img src="http://placehold.it/100&text=Slide2" alt="" /></a>
        </div>
      </li>
      <li class="thumb-item">
        <div class="thumb">
          <a href=""><img src="http://placehold.it/100&text=Slide3" alt="" /></a>
        </div>
      </li>
      <li class="thumb-item">
        <div class="thumb">
          <a href=""><img src="http://placehold.it/100&text=Slide4" alt="" /></a>
        </div>
      </li>
      <li class="thumb-item">
        <div class="thumb">
          <a href=""><img src="http://placehold.it/100&text=Slide5" alt="" /></a>
        </div>
      </li>
    </ul>
  </div>
</div>

</body>
</html>

为什么缩略图滑块无法正常工作

0 个答案: