jQuery中的简单滑块,切换后只显示前两张图片

我试图创建一个简单的滑块。当我点击一张图片时,另一张将可见。这是一个 codepen 用代码

.animate({scrollLeft}) ... 但我也陷入了循环实现中。但是婴儿步,对吧?

编辑: 问题是,我只切换了4张图片中的第一张和第二张。

以下是代码:

index.html

<div class=container>
  <img class='isActive' src="http://placehold.it/350x150">
  <img class='isHidden' src="http://placehold.it/350x150"> 
  <img class='isHidden' src="http://placehold.it/350x150"> 
  <img class='isHidden'src="http://placehold.it/350x150">
</div>

index.scss

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background: black;
}

.container {
 // display: inline-flex;
}

.slide {

}

.isActive {
  visibility: visible;  
}

.isHidden {
 visibility: hidden; 
}

index.js

$(function() {
  var allImgItems = $('img');
  var items = $('.container').find(allImgItems);

  toggleVisibility = function(item) {    
    item.toggleClass('isHidden');
    item.next().removeClass('isHidden').addClass('isActive');
//    item.next().removeClass('isHidden').animate( { scrollLeft: 200 + 'px'}, '500', 'swing', function() {console.log('Animation completed') } );
    console.log(item);
  }

  toggleItem = function () {
    var item = $('img:first').click(function () {  // [QUESTION]The problem is here I think, since I'm just passing the first obj and not the list?
      toggleVisibility(item);
    })
  }
  toggleItem();
})