如何使用 Slick 旋转木马 slider？

Question

我真的很想能够使用Ken Wheeler的光滑旋转木马 slider，但是很难理解如何使用它。 我按照 Ken Wheeler 的 github 上的说明进行操作，但什么也没发生？ 谁能指出我哪里出错了？ 我在网上使用了几个教程，但仍然无法正常工作！

 <html> <head> <title>My Now Amazing Webpage</title> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="slick/slick.js"></script> </head> <body> <div class="slider demo"> <div> Slide 1 </div> <div> Slide 2 </div> <div> Slide 3 </div> </div> <script type="text/javascript"> $(document).ready(function(){ $('.demo').slickPlay(); }); </script> </body>

Answer 1

你试过这个吗？

 <script type = "text/javascript">

 function slider(){
 $(".slider #1").show("fade",500);
 $(".slider #1").delay(5500).hide("slide",{direction: "left"}, 500);

 var sc =$(".slider img").size();
 var count = 2;

 setInterval(function () {
 $(".slider #"+count).show("slide",{direction: "right"}, 500);
 $(".slider #"+count).delay(5500).hide("slide",{direction: "left"}, 500);

 if(count == sc) {
 count = 1;

 }
 else 
 {
    count = count + 1;
 }
 }, 6500);
 }

 </script>

Answer 2

$(document).ready(function(){
   $('.demo').slick();
});

Answer 3

确保正确加载 Slick 滑块的 JS 和 CSS 文件。 尝试使用 Slick 滑块的 CSS 和 JS 文件的 CDN 链接。

此外，请检查您的控制台以获取有关该错误的更多详细信息。 这也可能是由于 Jquery 错误。 在这种情况下，请使用“jQuery”关键字而不是“$”。

我使用了 Slick 滑块的 CDN JS 和 CSS 链接。 现在光滑的 slider 对我来说工作正常。

 <html> <head> <title>My Now Amazing Webpage</title> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"/> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script> </head> <body> <div class="slider demo"> <div> Slide 1 </div> <div> Slide 2 </div> <div> Slide 3 </div> </div> <script type="text/javascript"> jQuery(document).ready(function($){ jQuery('.demo').slick({ arrows:1, dots:1, cssEase:"ease-out", autoplay:true}); }); </script> </body>

如何使用 Slick 旋转木马 slider？

问题描述

3 个解决方案

解决方案1
0 2016-02-09 17:01:03

解决方案2
0 2019-05-31 08:27:12

解决方案3
0 2022-09-08 07:19:14

如何使用 Slick 旋转木马 slider？

问题描述

3 个解决方案

解决方案1 0 2016-02-09 17:01:03

解决方案2 0 2019-05-31 08:27:12

解决方案3 0 2022-09-08 07:19:14

解决方案1
0 2016-02-09 17:01:03

解决方案2
0 2019-05-31 08:27:12

解决方案3
0 2022-09-08 07:19:14