不能让JQuery插件Slick (carousel)工作

Can't get JQuery plugin Slick (carousel) to work

本文关键字：carousel 工作 Slick JQuery 插件 不能      更新时间：2023-09-26

这是我的HTML标题:

<!-- Bootstrap css -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Jquery slick plugin -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>
<!-- My CSS -->
<link href="css/styles.css" rel="stylesheet">

这是我的身体的一部分，我试图显示旋转木马也是我的javascript的东西加载:

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="carousel">
                <div><img src="img/slide-1.jpg"></div>
                <div><img src="img/slide-2.jpg"></div>
            </div>
        </div>
    </div>
</div>
<!-- Bootstrap JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Bootstrap JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!--Jquery Slick plugin -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"</script>
<!-- My JavaScript -->
<script src="js/scripts.js"></script>
<!-- My JQuery -->
<script src="js/jquery.js"></script>

最后是jquery文件

$(document).ready(function(){
$('.carousel').slick({
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 2,
    slidesToScroll: 1
});
});

我一直在努力解决这个问题，所以任何帮助都是非常感谢的。

代码中有一个小错误，bootstart .min.js将需要jquery。

你需要在启动前包含jquery。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

这是基于你的活塞

https://plnkr.co/edit/3NXz9Q69M3IxbTONg6n2?p =预览

这是一个似乎可以工作的小提琴

https://jsfiddle.net/0p4fjskc/

你应该首先包含jquery !

<!-- Bootstrap JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Bootstrap JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
相关文章：