Question

我正试图在我的网站上使用一个渐弱的Slick滑块。但我没有运气。这是Slick：http://kenwheeler.github.io/slick/

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

<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的新手，所以我觉得我在弄乱那些东西。

当我加载页面时，我看到的只有3个测试图像，一个在另一个之下。

任何人都知道我做错了什么？

Answer 1

问题出在slide设置（选择滑块的元素查询）

例如更改：

$('.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），则可以正常工作。

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

我无法让我的Slick滑块工作

1 个答案: