我正在学习和学习bootstrap,此时我正试图在我的网站上添加一个轮播。
我从Bootstrap中选择了第一个DIV上的一个例子,id =“carouselExampleSlidesOnly”,带有这个ID,旋转木马工作得很好。
但我想删除“carouselExampleSlidesOnly”并更改另一个ID名称。当我这样做改为“myCarousel”时,代码停止工作。
我尝试添加带有ID名称的javascript代码,但即使这样,轮播也不起作用,并显示静态图像。
<script>
$('#myCarousel').carousel({
interval: 3000,
pause: null,
})
</script>
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="null">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="assets/images/slide1.png" alt="First slide">
<div class="container">
<div class="slider-text">
<h2>Lorem Ipsum is simply dummy text.</h2>
<p>ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/images/slide2.png" alt="Second slide">
<div class="container">
<div class="slider-text">
<h2>Lorem Ipsum is simply dummy text.</h2>
<p>ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
我相信你遇到的问题是
$('#myCarousel').carousel({
interval: 3000,
pause: null,
})
当您需要字符串或布尔值时,您将null作为参数传递,您可以从控制台中看到此错误。
Chrome上的(Ctrl + shift + I)
它应该是
$('#myCarousel').carousel({
interval: 3000,
pause: false,
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="null">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://via.placeholder.com/150" alt="First slide">
<div class="container">
<div class="slider-text">
<h2>Lorem Ipsum is simply dummy text.</h2>
<p>ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://via.placeholder.com/150" alt="Second slide">
<div class="container">
<div class="slider-text">
<h2>Lorem Ipsum is simply dummy text.</h2>
<p>ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>