jQuery Slider不适用于显示的每个帖子

Question

我正在创建一个电子商务网站，我想在索引页面上显示所有产品。每个产品都有照片，我想要每张小产品照片，所以要有自己的带有控件的滑块，我使用此代码，我在jquery上尝试过.each（），但没有任何用处，请帮帮我。

我想让此滑块找到每个.sld-h并分别工作，

如果在第一篇文章中输入了鼠标，则所有滑块都将停止，如果我将第一张照片更改为第二张，则所有操作都相同

cats.implicits._

var Slider = function(){
	//configuration
	var width = 150; //slide width
	var t = 1000; //animation time
	var p = 3000; //pause time
	var currentslide = 1;
	//cache DOM
	var $slider = $('.sld-h');
	var $slideContainer = $slider.find('.slides');
	var $slides = $slideContainer.find('.slide');
   	var interval;
	function startSlider(){
			interval = setInterval(function(){
			$slideContainer.animate({'margin-left': '-='+width}, t, function(){
				currentslide++;
				if (currentslide === $slides.length){
					currentslide = 1;
					$slideContainer.css('margin-left', 0);
				}
			});
		}, p);
	};

	function stopSlider(){
		clearInterval(interval);
	}
	$slider.on('mouseenter', stopSlider).on('mouseleave', startSlider); 
	startSlider();
	//, ).on('mouseleave', startSlider);
};

$(document).ready(Slider);

.sld-h{
	width:150px;
	height:150px;
	margin:5px 0px 0px 5px;
	float:left;
	background-color:white;
	display:inline-block;
	overflow:hidden;
}
.sld-h i {
  position:absolute;
	line-height: 150px;
	font-size: 15px;
	text-shadow: 0px 0px 8px black;
	color:white;
}
.sld-h .fa-chevron-left{
	margin-left: 4px;
}

.sld-h .fa-chevron-right {
	margin-left: 135px;
}

.sld-h img{
	width:150px;
	height:150px;
}
.slides {
	display:block;
	width:3000px;
	height:150px;
	float:left;
	margin-left: 0px;
	list-style-type: none;
}
.slide {
	float:left;
	list-style-type: none;
}