页面上有一些光滑的滑块

Question

我有问题。我在一个页面上的标签中带出一个带滑动的滑动滑块，我在那里有很多。当我拿出一个滑块时，没有问题。但是当2或更多时，所有的滑块都被打破了。我认为这是一个问题，因为我在js文件中只有一个滑块，并且通过php在页面上显示了很多滑块，浏览器认为它是相同的滑块。我怎样才能使每个滑块变得独一无二，并且在js中检查滑块。我从Wordpress插件输出PHP高级自定义字段。请帮我解决这个问题。

我的JS光滑参数：

jQuery(document).ready(function(){

//Product slider with thumbs
jQuery('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  autoplay: true,
  autoplaySpeed: 7000,
  fade: true,
  asNavFor: '.slider-nav'
});
jQuery('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: false,
  centerMode: true,
  vertical: true,
  verticalSwiping: true,
  centerPadding: 150,
  appendArrows: jQuery(".slider-nav"),
  prevArrow:"<button type='button' class='slick-prev pull-left'><i class='fa fa-angle-left' aria-hidden='true'></i></button>",
  nextArrow:"<button type='button' class='slick-next pull-right'><i class='fa fa-angle-right' aria-hidden='true'></i></button>",
  focusOnSelect: true,
  responsive: [
    {
      breakpoint: 901,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        vertical: false,
        centerMode: true,
        centerPadding: 150,
        verticalSwiping: false,
        dots: false,
        swipe: true
      }
  }]
}); 
});

我的PHP输出：

<?php elseif( get_row_layout() == 'type_silder' ): ?>
<?php $product_gallery = get_sub_field('type_slider_gallery'); 
   if( $product_gallery ): ?>
<div class="product-slider-container">
   <div class="slider-for">
      <?php foreach( $product_gallery as $product_slider ): ?>
      <a href="<?php echo get_post_meta( $product_slider['id'], 'link_page_img', true )?>">
         <div class="fullsize-img">
            <img src="<?php echo $product_slider['sizes']['large']; ?>" alt="<?php echo $product_slider['alt']; ?>"/>
            <div class="subtitle-product">
               <h3><?php echo $product_slider['title']; ?></h3>
            </div>
         </div>
      </a>
      <?php endforeach; ?>
   </div>
   <div class="slider-nav">
      <?php foreach( $product_gallery as $product_slider ): ?>
      <div class="thumb-img">
         <img src="<?php echo $product_slider['sizes']['thumbnail']; ?>" alt="<?php echo $product_slider['alt']; ?>"/>
      </div>
      <?php endforeach; ?>
   </div>
</div>
<?php endif; ?><!-- product gallery endif -->
<?php endif; ?>