элементы слайдеры не работают

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> 

при и- может видеть, что это мой код, и у него есть 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); 
      }); 
     });