项目不工作

Question

我有我的HTML代码中的问题滑块，问题是，我想如果它叫什么，在我的情况我有9个项目我想只显示可能的5，创建一个项目滑块他们当有人点击矩形就会向左滑动，并让他在3个离开品牌，但每次我试图做的，没有什么发生，更多的解释，请查看我的代码：

<div id="tf-clients" class="text-center"> 
    <div class="overlay"> 
     <div class="container"> 

      <div class="section-title center"> 
       <h2>Some of <strong>our Clients</strong></h2> 
       <div class="line"> 
        <hr> 
       </div> 
      </div> 
      <div id="clients" class="owl-carousel owl-theme" style="opacity: 1; display: block;"> 
       <div class="owl-wrapper-outer autoHeight" style="height: 121px;"><div class="owl-wrapper" style="width: 3192px; left: 0px; display: block;"><div class="owl-item" style="width: 228px;"><div class="item"> 
        <img src="img/client/01.png"> 
       </div></div><div class="owl-item" style="width: 228px;"><div class="item"> 
        <img src="img/client/02.png"> 
       </div></div><div class="owl-item" style="width: 228px;"><div class="item"> 
        <img src="img/client/03.png"> 
       </div></div><div class="owl-item" style="width: 228px;"><div class="item"> 
        <img src="img/client/04.png"> 
       </div></div><div class="owl-item" style="width: 228px;"><div class="item"> 
        <img src="img/client/05.png"> 
       </div></div><div class="owl-item" style="width: 228px;"><div class="item"> 
        <img src="img/client/06.png"> 
       </div></div><div class="owl-item" style="width: 228px;"><div class="item"> 
        <img src="img/client/07.png"> 
       </div></div></div></div> 

      <div class="owl-controls clickable"><div class="owl-pagination"><div class="owl-page active"><span class=""></span></div><div class="owl-page"><span class=""></span></div></div></div></div> 

     </div> 
    </div> 
</div> 

为u可以看到这是我的代码，它有9个图像，我已经创建了一个span标签，所以创建一个矩形，所以当我点击span时，它会向左滑动它们显示其他隐藏图像，但它似乎不工作我做错了事，请给我一只手，它会感谢提前感谢。

Answer 1

我最近刚刚与自己相似的东西练习。这是我想出了，看看是否有帮助：

http://jsfiddle.net/v3kLwh0o/

HTML：

<div class="slider-wrapper"> 
    <div class="arrows"> 
     <div class="left"><i class="fa fa-chevron-left fa-lg"></i></div> 
     <div class="right"><i class="fa fa-chevron-right fa-lg"></i></div> 
    </div> 

    <ul class="slides"> 
     <li class="slide one"></li> 
     <li class="slide two"></li> 
     <li class="slide three"></li> 
     <li class="slide one"></li> 
    </ul> 
</div> 

CSS：

.slider-wrapper { 
    margin: auto; 
    margin-top: 50px; 
    width: 720px; 
    height: 400px; 
    overflow: hidden; 
    background-color: black; 
} 

.slider-wrapper > .slides { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    width: 2880px; /* 720*4(pictures) */ 
    height: 400px; 
} 

.one { background-color: blue; } 
.two { background-color: green; } 
.three { background-color: red; } 

.slider-wrapper > .slides .slide { 
    width: 720px; /* 720px */ 
    height: 400px; /* 400px */ 
    float: left; 
} 

.slider-wrapper > .arrows { 
    margin: 170px 0; /* (400-60[height of arrow container])/2 */ 
    position: absolute; 
    width: 720px; 
} 

.slider-wrapper > .arrows > .left, .slider-wrapper > .arrows > .right { 
    height: 60px; 
    width: 50px; 
    background-color: gray; 
    padding: 20px 0; /* (60-20[height of arrow])/2 */ 
    color: white; 
    text-align: center; 
} 

.slider-wrapper > .arrows > .left:hover, .slider-wrapper > .arrows > .right:hover { 
    background-color: black; 
    cursor: pointer; 
} 

.slider-wrapper > .arrows > .left { float: left; } 
.slider-wrapper > .arrows > .right { float: right; } 

JS：

// Set quantified variables 
     var width = 720; 
     var animationSpeed = 1000; 
     var slideCount = 1; 

     // Set variables to cache the DOM tree parts that are needed (makes performance faster since the program doesn't have to go through the entire tree everytime) 
     var $leftArrow = $('.arrows > .left'); 
     var $rightArrow = $('.arrows > .right'); 

     var $slider = $('.slider-wrapper > .slides'); 
     var $slides = $slider.find('.slide'); 

     // Runs when the left arrow is clicked 
     $leftArrow.click(function() { 
      $slider.animate({'margin-left':'-='+width}, animationSpeed, function() { 
       // After the animation ends, increase counter and check to see if its on the last image 
       slideCount++; 
       if (slideCount == $slides.length) { 
        slideCount = 1; 
        $slider.css('margin-left','0'); 
       } 

       // console.log("Left: " + slideCount); 
      }); 
     }); 

     // Runs when the right arrow is clicked 
     $rightArrow.click(function() { 
      // Check to see if slider is on the first image (which it is initially) 
      // If it is, change the left margin of the slider to (number of images - 1) * width * -1 (i.e. margin-left of the last image) 
      var firstImageCheck = function() { 
       if (slideCount == 1) { 
        slideCount = $slides.length; 
        lastPicMargin = width * ($slides.length-1) * -1; 
        $slider.css('margin-left', lastPicMargin); 
       } 
      } 

      firstImageCheck(); 

      $slider.animate({'margin-left':'+='+width}, animationSpeed, function() { 
       // After the animation ends, decrease counter and check to see if its on the first image 
       slideCount--; 
       firstImageCheck(); 
       // console.log("Right: " + slideCount); 
      }); 
     });