我根本无法让我的 Slick 滑块工作-前端问题

I can#39;t get my Slick slider to work at all(我根本无法让我的 Slick 滑块工作)

本文介绍了我根本无法让我的 Slick 滑块工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试让一个褪色的、光滑的滑块在我的网站上工作.但我没有运气.这是 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="aHR0cDovL3BsYWNlaG9sZC5pdC8xMDAweDQwMCZhbXA7dGV4dD1bIGltZyAxIF0=" /></div>
  <div><img src="aHR0cDovL3BsYWNlaG9sZC5pdC8xMDAweDQwMCZhbXA7dGV4dD1bIGltZyAxIF0=" /></div>
  <div><img src="aHR0cDovL3BsYWNlaG9sZC5pdC8xMDAweDQwMCZhbXA7dGV4dD1bIGltZyAxIF0=" /></div>
    </div>

    <script type="text/javascript" src="Ly9jb2RlLmpxdWVyeS5jb20vanF1ZXJ5LTEuMTEuMC5taW4uanM="></script>
    <script type="text/javascript" src="Ly9jb2RlLmpxdWVyeS5jb20vanF1ZXJ5LW1pZ3JhdGUtMS4yLjEubWluLmpz"></script>
<script type="text/javascript" src="Ly9jZG4uanNkZWxpdnIubmV0L2pxdWVyeS5zbGljay8xLjMuMTEvc2xpY2subWluLmpz"></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="aHR0cDovL3BsYWNlaG9sZC5pdC8xMDAweDQwMCZhbXA7dGV4dD1bIGltZyAxIF0=" /></div>
  <div><img src="aHR0cDovL3BsYWNlaG9sZC5pdC8xMDAweDQwMCZhbXA7dGV4dD1bIGltZyAxIF0=" /></div>
  <div><img src="aHR0cDovL3BsYWNlaG9sZC5pdC8xMDAweDQwMCZhbXA7dGV4dD1bIGltZyAxIF0=" /></div>
    </div>

    <script type="text/javascript" src="Ly9jb2RlLmpxdWVyeS5jb20vanF1ZXJ5LTEuMTEuMC5taW4uanM="></script>
    <script type="text/javascript" src="Ly9jb2RlLmpxdWVyeS5jb20vanF1ZXJ5LW1pZ3JhdGUtMS4yLjEubWluLmpz"></script>
<script type="text/javascript" src="Ly9jZG4uanNkZWxpdnIubmV0L2pxdWVyeS5zbGljay8xLjMuMTEvc2xpY2subWluLmpz"></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>

这篇关于我根本无法让我的 Slick 滑块工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！