我根本无法让我的 Slick 滑块工作

2022-01-24 00:00:00 slider jquery javascript css

我正在尝试让一个褪色的、光滑的滑块在我的网站上工作.但我没有运气.这是 Slick:http://kenwheeler.github.io/slick/

I'm trying to get a fading, Slick slider to work on my website. But I'm having no luck. This is Slick: http://kenwheeler.github.io/slick/

如果您向下滚动，您将看到有关如何实施的说明.我附上了我的截图，希望有人能看到我做错了什么.

If you scroll down, you'll see the instructions on how to implement. I've attached my screenshot, so hopefully someone can see what I'm doing wrong.

<html>
    <head>
    <title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.3.11/slick.css"/>
    </head>
    <body>

    <div class="fade">
   <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
  <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
  <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></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="//cdn.jsdelivr.net/jquery.slick/1.3.11/slick.min.js"></script>


    <script type="text/javascript">
        $(document).ready(function(){       
$('.fade').slick({
  dots: true,
  infinite: true,
  speed: 500,
  fade: true,
  slide: '> div',
  cssEase: 'linear'
});
    
        });
</script>

    </body>
</html>

我是 Javascript 和 Jquery 的新手，所以我觉得我在那里搞砸了.

I'm new to Javascript and Jquery so I feel like I'm messing something up there.

当我加载我的页面时，我看到的只是 3 张测试图片，一张在另一张下方.

When I load my page, all I see are the 3 test images, one below the other.

有人知道我做错了什么吗?

Anyone know what I'm doing wrong?

推荐答案

问题出在slide设置(元素查询选择滑块)

The problem is in the slide setting (element query to select the slider)

例如改变:

$('.fade').slick({
  dots: true,
  infinite: true,
  speed: 500,
  fade: true,
  slide: '> div',
  cssEase: 'linear'
});

到

$('.fade').slick({
    dots: true,
    infinite: true,
    speed: 700,
    autoplay:true,
    autoplaySpeed: 2000,
    arrows:false,
    slidesToShow: 1,
    slidesToScroll: 1
 });

工作，只是玩弄设置.您将 slide 定义为 >div(div 的中间子级)，所以如果你删除它(默认为 div)，它就可以工作.

Works, just play around with the settings. You were defining slide as > div (inmediate children of div), so if you remove it (defaults to div), it works.

<html>
    <head>
    <title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.3.11/slick.css"/>
    </head>
    <body>

    <div class="fade">
   <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
  <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
  <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></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="//cdn.jsdelivr.net/jquery.slick/1.3.11/slick.min.js"></script>


    <script type="text/javascript">
        $(document).ready(function(){       
$('.fade').slick({
    dots: true,
    infinite: true,
    speed: 700,
    autoplay:true,
    autoplaySpeed: 2000,
    arrows:false,
    slidesToShow: 1,
    slidesToScroll: 1
 });
    
        });
</script>

    </body>
</html>

相关文章