所以我尝试使用 Django 构建一个网站,以使用图像滑块轮播显示图像,但代码似乎不起作用。我不知道为什么。这些图像不是一个轮播,而是一个一个地堆叠在一起。
我的html:
<div class="section">
<div class="container">
<div class="row justify-content-between">
<div class="col-lg-7">
<div class="img-property-slide-wrap">
<div class="img-property-slide">
<img src="{{ object.image1.url }}" alt="Image" class="img-fluid">
<img src="{{ object.image2.url }}" alt="Image" class="img-fluid">
<img src="{{ object.image3.url }}" alt="Image" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
我的风格.css:
.img-property-slide-wrap {
position: relative; }
.img-property-slide-wrap .tns-outer .tns-inner {
padding-bottom: 100px !important; }
.img-property-slide-wrap .tns-nav {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
bottom: 40px;
z-index: 2; }
.img-property-slide-wrap .tns-nav button {
background: none;
border: none;
display: inline-block;
margin: 2px;
position: relative; }
.img-property-slide-wrap .tns-nav button:active, .img-property-slide-wrap .tns-nav button:focus {
outline: none; }
.img-property-slide-wrap .tns-nav button:before {
position: absolute;
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.2);
right: 0;
-webkit-transition: .3s all ease;
-o-transition: .3s all ease;
transition: .3s all ease; }
.img-property-slide-wrap .tns-nav button.tns-nav-active:before {
background-color: #1f6f8b; }
您的 HTML 标记存在一些轮播结构问题。检查引导文档中的轮播示例。
https://getbootstrap.com/docs/4.0/components/carousel/
这是代码的更正版本,它以轮播形式显示图像。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
/>
<title>Bootstrap Image Carousel</title>
</head>
<body>
<div class="section">
<div class="container">
<div class="row justify-content-between">
<div class="col-lg-7">
<div id="imageCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img
src="https://images.pexels.com/photos/147411/italy-mountains-dawn-daybreak-147411.jpeg?auto=compress&cs=tinysrgb&w=1200"
class="d-block w-100"
alt="Image 1"
/>
</div>
<div class="carousel-item">
<img
src="https://images.pexels.com/photos/36717/amazing-animal-beautiful-beautifull.jpg?auto=compress&cs=tinysrgb&w=1200"
class="d-block w-100"
alt="Image 2"
/>
</div>
<div class="carousel-item">
<img
src="https://images.pexels.com/photos/247599/pexels-photo-247599.jpeg?auto=compress&cs=tinysrgb&w=1200"
class="d-block w-100"
alt="Image 3"
/>
</div>
</div>
<a
class="carousel-control-prev"
href="#imageCarousel"
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="#imageCarousel"
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>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>