有什么办法使我的旋转木马可拖动?

Question

我对这个旋转木马有一个问题。我使用了bootstrap carousel模板，只是为幻灯片添加了我自己的图像。我使用jQuery使其可拖动，当然我添加了cdn链接。它是DRAGGABLE，但是它不能改变幻灯片，为什么?

这是我到目前为止的代码:

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/SCOVER_1.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/SCOVER_2.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/SCOVER_3.png" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>

<script>
$(document).ready(function() {
// Make carousel items draggable
$(".carousel-inner").draggable();
});
</script>
<style>
img {
height: 625px;
}
</style>

Answer 1

我建议使用滑块插件滑块/旋转木马。它的响应，非常用户友好和UI是非常简单的，所以你可能很容易理解。你只需要添加滑块的CDN，你也可以根据你的设计自定义它。

使用滑块的步骤:

1. 添加CSS: Slick CSS
2. 添加JS: Slick JS
3. 在你的文件中添加脚本，并添加你想要滑动条的类。(这是样例脚本，可能因设计和需求而有所不同)

$('.slider-class').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});

注意:你可以自定义很多东西，比如多少幻灯片将显示或滚动在视口中，可以使它在一个循环，自动播放，等等…

详情请参阅以下连结:滑块官方网站

Slick-Slider Codepen

参考获取CDN链接:CDN链接参考