CSS-滑动滑块与自动播放同步

问题描述 投票：0回答：1
<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>

我正在尝试从圆滑的传送带（Slider Syncing）和https://kenwheeler.github.io/slick/中推动autoplay: true的示例，但到目前为止并没有太大的成功。上面的代码在一开始对我来说似乎是正确的，但是我不知道在哪里包含autoplay: on。我尝试将其添加到slider-for，slider-nav或什至两者中，但似乎都无法正常工作...

css slick.js
1个回答
0
投票

您正在使用多个滑块，也由于某些原因您的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>
0
投票

您需要添加多于在slidesToShow中给予的幻灯片

<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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.