我正在尝试构建简单的内容 slider ，当页面加载时我只想显示一个项目(图像和内容)并制作某种用户可以导航的导航。
这是我的简单 HTML
<div class="container">
<div class="row align-items-center ">
<div class="carousel slide" id="myCarousel" data-ride="carousel" data-interval="2000" data-pause="hover">
<div class="carousel-inner">
<div class="item active">
<div class="col-lg-6 image">
<img src="https://placehold.it/500/e499e4/fff&text=1">
</div>
<div class="col-lg-6 iot-features-content">
<h3> Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus.</p>
<a href="#" class="btn btn-primary glavni">Link</a>
</div>
</div>
<div class="item ">
<div class="col-lg-6 image">
<img src="https://placehold.it/500/e499e4/fff&text=1">
</div>
<div class="col-lg-6 iot-features-content">
<h3> Title 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus.</p>
<a href="#" class="btn btn-primary glavni">Link</a>
</div>
</div>
</div>
</div>
</div>
</div>
还有我的 JS 代码
$('#myCarousel').carousel({
interval: 4000
})
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<2;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
$(document).ready(function() {
$('.item:first-child').addClass('active');
});
想法是拥有简单的导航(上一个 - 下一个)并仅显示一个项目，当用户单击下一个时显示另一个项目，依此类推。这也是我的 fiddle :https://jsfiddle.net/wvuake3j/1/
最佳答案
您似乎想使用 bootstrap 4 将轮播功能添加到 HTML 中。
如果您阅读 https://getbootstrap.com/docs/4.3/components/carousel/ 中提到的 carousal 文档.
根据文档，您不需要添加自定义 JavaScript，请尝试以下代码。
$(function(){
$('#myCarousel').carousel({
interval: 4000
})
})<!DOCTYPE html>
<html>
<head>
<link href="https://getbootstrap.com/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row align-carousel-items-center ">
<div class="carousel slide" id="myCarousel" data-ride="carousel" data-interval="2000" data-pause="hover">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-lg-6 image">
<img src="https://placehold.it/500/e499e4/fff&text=1">
</div>
<div class="col-lg-6 iot-features-content">
<h3> Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus.</p>
<a href="#" class="btn btn-primary glavni">Link</a>
</div>
</div>
</div>
<div class="carousel-item ">
<div class="row">
<div class="col-lg-6 image">
<img src="https://placehold.it/500/e499e4/fff&text=1">
</div>
<div class="col-lg-6 iot-features-content">
<h3> Title 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus.</p>
<a href="#" class="btn btn-primary glavni">Link</a>
</div>
</div>
</div>
</div>
<!-- Navigation Control -->
<!-- Controls -->
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://getbootstrap.com/docs/4.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>希望对你有帮助
关于javascript - 使用 jQuery/Javascript 的内容 slider ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59392175/