允许多个 CSS 类使用同一个 JS 函数（Slick Carousel）

Question

我试图在同一页面上多次实现 Slick 滑块，每个实例都使用“滑块同步”。现在我遇到的问题是，使用下面的代码，同步的文本会使用两个滑块进行调整：

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="./slick/slick.css">
  <link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
</head>
<style type="text/css">
  html, body {
    margin: 0;
    padding: 0;
  }

  * {
    box-sizing: border-box;
  }

  .person {
    width: 50%;
    margin: 0px auto;
  }

  .person img {
    width: 100%;
    margin:auto;
  }

  .slider {
      width: 90%;
      margin: 20px auto;
  }

  .slick-slide {
    margin: 0px 20px;
    opacity: 0.5;
  }

  .slick-slide img {
    width: 100%;
  }

  .slick-prev:before,
  .slick-next:before {
      color: black;
  }

  .slick-center {
    opacity: 1;
  }
  }
</style>
<body>

  <section class="person">
    <div><img src="img/people/jobs.jpg"></div>
  </section>
    <section class="regular slider">
      <div><img src="img/1.jpg"></div>
      <div><img src="img/2.jpg"></div>
      <div><img src="img/3.jpg"></div>
      <div><img src="img/4.jpg"></div>
      <div><img src="img/5.jpg"></div>
      <div><img src="img/6.jpg"></div>
      <div><img src="img/7.jpg"></div>
      <div><img src="img/8.jpg"></div>
      <div><img src="img/9.jpg"></div>
    </section>

    <section class="slider-for slider">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </section>

    <section class="regular slider">
      <div><img src="img/1.jpg"></div>
      <div><img src="img/2.jpg"></div>
      <div><img src="img/3.jpg"></div>
      <div><img src="img/4.jpg"></div>
      <div><img src="img/5.jpg"></div>
      <div><img src="img/6.jpg"></div>
      <div><img src="img/7.jpg"></div>
      <div><img src="img/8.jpg"></div>
      <div><img src="img/9.jpg"></div>
    </section>

    <section class="slider-for slider">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </section>

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
  <script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $(document).on('ready', function() {
      $(".regular").slick({
        dots: false,
        infinite: true,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 5,
        slidesToScroll: 1,
        lazyLoad: 'ondemand',
        asNavFor: '.slider-for',
        focusOnSelect:true
      });
      $('.slider-for').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: true,
        asNavFor: '.regular'
      });
    });
  </script>

</body>
</html>

现在我意识到上面的错误是因为它使用相同的 Javascript 函数来影响“不同”部分，从而导致错误。我能想到的一个解决方法是为每个类设置一个新函数，即：

$('.regular1').slick({ ... }); -> <section class="regular1">
$('.slider-for1').slick({ ... }); -> <section class="slider-for1">

$('.regular2').slick({ ... }); -> <section class="regular2">
$('.slider-for2').slick({ ... }); -> <section class="slider-for2">

$('.regular3').slick({ ... }); -> <section class="regular3">
$('.slider-for3').slick({ ... }); -> <section class="slider-for3">

etc

我的问题是：有没有办法更有效地做到这一点。例如，通过在类名中包含某种变量，即：

$('.regular'.$a).slick({ ... }); -> <section class="regular1">
$('.slider-for'.$a).slick({ ... }); -> <section class="slider-for1">

这不是一个大问题，页面上只有 2 个滑块，但我打算在一个页面上由 PHP 脚本自动生成 10 个滑块，我真的不想复制功能一遍又一遍地用不同的类名，效率低下。

作为参考，我正在使用这个轮播：http://kenwheeler.github.io/slick/

谢谢

意大利

Answer 1

你可以用.each()或ForEach来做，简单的例子：

$( ".slider-for" ).each(function() {
  $( this ).slick({ ... });
});

供参考：https://api.jquery.com/each/

Answer 2

这是最终的 Javascript 的样子：

<script type="text/javascript">
$(document).on('ready', function() {
  var config = { dots: false,
                 infinite: true,
                 centerMode: true,
                 centerPadding: '40px',
                 slidesToShow: 5,
                 slidesToScroll: 1,
                 lazyLoad: 'ondemand',
                 focusOnSelect:true
               };
  var navFor = [];
  $( ".slider-for" ).each(function(index) {
      $( this ).slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: true,
        swipe: false,
        touchMove: false,
        draggable: false
      });
      navFor[index] = this;
  });
  $( ".regular" ).each(function(index) {
      config.asNavFor = navFor[index];
      $( this ).slick(config);
      //console.log(this);
  });
});

Answer 3

如果您想在一页中使用多个平滑滑块，请利用 $(this)，但如果您也使用平滑事件，则可以在下面获得帮助：

var slider = $(".bhi-slider"),
    status = $('.slider-number'),
    progressBarLabel = $( '.slider__label' );

slider.each(function(index){
    $(this).slick({
        infinite: true,
        dots: false,
        autoplay: true,
        arrows: true,
        speed: 300,
        slidesToShow: 1,
        slidesToScroll: 1,
        nextArrow: $('.next-slide')[index],
        prevArrow: $('.prev-slide')[index],
    });

    $(this).on('init', function(slick){
        $(progressBarLabel[index]).css('width', 100 / slick.isTrigger + '%');
    });

    $(this).on('beforeChange', function(event, slick, currentSlide, nextSlide){ 
        var constNum = ( (1) / (slick.slideCount) ) * 100;
        var calc = ( (nextSlide) / (slick.slideCount) ) * 100;
            calc += constNum;
        $(progressBarLabel[index]).css('width', calc + '%');
    });

    $(this).on('init reInit afterChange', function (event, slick, currentSlide, nextSlide){
        var i = (currentSlide ? currentSlide : 0) + 1;
        $(status[index]).html('<span class="number-slide">' + i + '</span><span class="total-slide">' + slick.slideCount + '</span>');
    });
});