我正在尝试使自举轮播工作,但是当我加载页面时,它仅以全尺寸显示所有3张图像。
我已经尝试了所有无法找到的解决方案。我将引导脚本放在正确的位置。我包括了jQuery,因为显然这是必需的(??)。我将其中一张图片标记为有效。
标题/导入项:
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
// Load this when the DOM is ready
$(document).ready(function() {
$('#carousel').carousel();
});
</script>
</head>
轮播:
<h1 class="text-center">Slideshow</h1>
<div class="carousel" id="carousel" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active"><img src="img/food-1.jpg" alt="Food 1"></div>
<div class="item"><img src="img/food-2.jpg" alt="Food 2"></div>
<div class="item"><img src="img/food-3.jpg" alt="Food 3"></div>
</div>
<a href="#carousel" data-slide="prev" class="left-carousel-control">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a href="#carousel" data-slide="next" class="right-carousel-control">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
答案 0 :(得分:0)
似乎您正在使用Bootstap-3的HTML代码和Bootstrap-4的JS文件。
即不兼容问题。
这是Bootstrap-4滑块的简单代码。 Bootstrap-4 Carousel
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://source.unsplash.com/1920x1080/?water" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://source.unsplash.com/1920x1080/?nature" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://source.unsplash.com/1920x1080/?food" class="d-block w-100" alt="...">
</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>
如果要使用Bootstrap-3版本,请参考, Bootstrap 3 Carousel
答案 1 :(得分:0)
Bootstrap-4提供了简单的轮播滑块,您可以尝试这个简单的示例。
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg" alt="Los Angeles" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="chicago.jpg" alt="Chicago" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="ny.jpg" alt="New York" width="1100" height="500">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>