Question

我试图在同一页面上多次实现Slick滑块，每个实例使用＆＃34; Slider Syncing＆＃34;。现在我遇到的问题是，使用下面的代码，同步文本会调整两个滑块：

＆＃13;

<!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>

＆＃13;

现在我意识到上面的错误是因为它使用相同的Javascript函数来影响＆＃34;不同的＆＃34;部分因此导致错误。我能想到的一个问题是每个类都有一个新函数，即：

$('.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个滑块，但我打算在一个页面上有10个滑块由PHP脚本自动生成，我真的不是真的我想要用不同的类名一遍又一遍地复制这个功能，效率很低。

作为参考，我使用此轮播：http://kenwheeler.github.io/slick/

由于

板井

Answer 1

您可以使用SELECT Period INTO #tablePeriod FROM CourseInstance WHERE Year = 2015; SELECT * FROM #tablePeriod;或.each()，简单示例：

ForEach

供参考：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

如果您想在一页中使用多个滑动条，请利用//considering R.drawable.paintpalette_64_wmblue is the img2 img2.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { img1.setImageResource(R.drawable.paintpalette_64_wmblue); } });，但是如果您也正在使用滑动事件，则可以在下面获得帮助：

$(this)

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

3 个答案: