Question

<html>
  <head>
  <title>My Now Amazing Webpage</title>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"/>
  <style>
  a {
    background-color: yellow;
    display: block;
    margin: 10px;
    width: 150px;
    height: 150px;
  }
.d1 {
    background-color: yellow;
    padding: 5px;
}
.d2 {
    background-color: lightblue;
    display: flex;
    padding: 10px;
}
  </style>
  </head>
  <body>

<div class="slider-for d1">
    <div><a href="https://kenwheeler.github.io/slick/">1</a></div>
</div>

<div class="slider-nav d2">
    <div><a href="https://kenwheeler.github.io/slick/">1</a></div>
    <div><a href="https://kenwheeler.github.io/slick/">2</a></div>
    <div><a href="https://kenwheeler.github.io/slick/">3</a></div>
    <div><a href="https://kenwheeler.github.io/slick/">4</a></div>
</div>

  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>

  <script type="text/javascript">
 $('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  autoplay: true,
  slidesToShow: 4,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});
  </script>

  </body>
</html>

我试图从圆滑的轮播（https://kenwheeler.github.io/slick/）中推广Slider Syncing的示例，而在autoplay: true上推广该示例，但到目前为止还没有成功。上面的代码在一开始对我来说似乎是正确的，但是我不知道在哪里包含autoplay: on。我尝试将其添加到slider-for，slider-nav或什至两者中，但似乎都没有作用...

Answer 1

除了在slidesToShow中提供幻灯片之外，您还需要添加其他内容（脚本代码）尝试用您的HTML代码替换

<div class="slider-for d1">
    <div><a href="https://kenwheeler.github.io/slick/">1</a></div>
    <div><a href="https://kenwheeler.github.io/slick/">2</a></div>
</div>

<div class="slider-nav d2">
    <div><a href="https://kenwheeler.github.io/slick/">1</a></div>
    <div><a href="https://kenwheeler.github.io/slick/">2</a></div>
    <div><a href="https://kenwheeler.github.io/slick/">3</a></div>
    <div><a href="https://kenwheeler.github.io/slick/">4</a></div>
    <div><a href="https://kenwheeler.github.io/slick/">5</a></div>
</div>

您可以在此处检查代码：https://codepen.io/rvtech/pen/dyPoxPm

Answer 2

您正在使用多个滑块也是出于某些原因，您的jQuery cdn如果没有使用http也无法加载，请尝试以下代码。

<html>

<head>
  <title>My Now Amazing Webpage</title>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />
  <style>
    a {
      background-color: yellow;
      display: block;
      margin: 10px;
      width: 150px;
      height: 150px;
    }
    
    .d1 {
      background-color: yellow;
      padding: 5px;
    }
    
    .d2 {
      background-color: lightblue;
      display: flex;
      padding: 10px;
    }
  </style>
</head>

<body>


  <div class="slider-for d1">
    <div><a href="https://kenwheeler.github.io/slick/">1</a></div>
  </div>

  <div class="slider-nav d2">
    <div><a href="https://kenwheeler.github.io/slick/">1</a></div>
    <div><a href="https://kenwheeler.github.io/slick/">2</a></div>
    <div><a href="https://kenwheeler.github.io/slick/">3</a></div>
    <div><a href="https://kenwheeler.github.io/slick/">4</a></div>
  </div>

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>

  <script type="text/javascript">
    $('.slider-nav').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 2000,


    });
  </script>

</body>

</html>

Answer 3

$('#ServDtlIndustries_slider .slider-single').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: false,
  asNavFor: '#ServDtlIndustries_slider .slider-nav',
  speed: 400,
  cssEase: 'cubic-bezier(0.77, 0, 0.18, 1)'
});

$('#ServDtlIndustries_slider .slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '#ServDtlIndustries_slider .slider-single',
  dots: false,
  arrows: false,
  centerMode: true,
  speed: 400,
  focusOnSelect: true,
  centerPadding: '0px',
  loop: true,
  autoplay: true,
});

<html>

<head>
  <title>My Now Amazing Webpage</title>
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" /> JS
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>


  <style>
    .slick-center {
      font-weight: 800;
      color: red
    }
    
    .slider_show {
      background-color: yellow;
      height: 350px;
    }
  </style>
</head>

<body>
  <div id="ServDtlIndustries_slider" class="syncing_slider_wrap">
    <!-- Start Slider Nav -->
    <div class="slider slider-nav">
      <div>
        <h3>
          1
        </h3>
      </div>
      <div>
        <h3>
          2
        </h3>
      </div>
      <div>
        <h3>
          3
        </h3>
      </div>
      <div>
        <h3>
          4
        </h3>
      </div>
    </div>
    <!-- End Slider Nav -->

    <!-- Start Slider Content -->
    <div class="slider slider-single">
      <div class="slider_show">
        1
      </div>
      <div class="slider_show">
        2
      </div>
      <div class="slider_show">
        3
      </div>
      <div class="slider_show">
        4
      </div>

    </div>
    <!-- End Slider Content -->
  </div>

</body>

</html>

CSS-Slick Slider与自动播放同步

3 个答案: