我的 slider 不工作（光滑 & jquery 3.5.1）
[英]my slider doesn't work (slick & jquery 3.5.1)
问题描述
我同时使用 bootstrap 4 和 jquery 3.5.1。 slider 似乎根本不起作用。 请帮忙。
<head>
<link rel="stylesheet" href="css/style.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link rel="stylesheet" href="css/slick-theme.css">
<link rel="stylesheet" href="css/slick.css">
</head>
<section class="slider-area slider">
<div>
<img src="assets/index/languages/france.png">
</div>
<div>
<img src="assets/index/languages/germany.png">
</div>
<div>
<img src="assets/index/languages/south-korea.png">
</div>
</section>
<script src="slick.js"></script>
<script>
$(".slider-area").slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
</script>
2 个解决方案
解决方案1
0 2020-08-03 14:35:07
你可以这样尝试：
<head>
<title></title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="assets/index/languages/france.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/index/languages/germany.png" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/index/languages/south-korea.png" alt="Third slide">
</div>
</div>
</div>
</body>
解决方案2
0 已采纳 2020-08-03 15:07:21
<head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css"> </head> <section class="slider-area slider"> <div> <img src="https://image.flaticon.com/icons/svg/555/555602.svg" width="200" height="200" class="mx-auto text-center"> </div> <div> <img src="https://image.flaticon.com/icons/svg/940/940279.svg" width="200" height="200" class="mx-auto text-center"> </div> <div> <img src="https://image.flaticon.com/icons/svg/3013/3013996.svg" width="200" height="200" class="mx-auto text-center"> </div> </section> <script> $(".slider-area").slick({ dots: true, infinite: true, slidesToShow: 1, slidesToScroll: 1, }); </script>
请试试这个..
并在上面添加外部 styles。
所以给你这个show 3，不能滑动任何东西。
slidesToShow: 3,
slidesToScroll: 3
请显示 1，然后滑动到另一个。
slidesToShow: 1,
slidesToScroll: 1
光滑的 slider 在引导下拉菜单中不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.