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

i am creating a website for e commerce, on the index page i want to show all the products. Each product have photos i want each little product photo so have their own slider with controls i use this code i have tried the .each() on jquery but get nothing usefull please help me.

i want to make this slider to find each .sld-h and and work for each separetedly,

if mouseentered for the first post, all slider are stopping, if i change the first photo to second all are doing same i am in trouble with this

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

<div class="sld-h">
    <i class="fa fa-chevron-left"></i>
    <ul class="slides">
      <li class="slide"><img id="1"  src="https://picsum.photos/150/150/?random"/></li>
      <li class="slide"><img id="2"  src="https://picsum.photos/150/150/?random"/></li>
      <li class="slide"><img id="3"  src="https://picsum.photos/150/150/?random"/></li>
      <li class="slide"><img id="4"  src="https://picsum.photos/150/150/?random"/></li>
    </ul>
  <i class="fa fa-chevron-right"></i>
</div>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</div>