引导转盘内容在延迟后意外消失

Question

我试图在我的网站的一个部分中放置一个旋转木马(使用HTML、CSS和Bootstrap 5(，但问题是过了一段时间，该部分中的所有内容和旋转木马都消失了，然后你需要再次重新加载页面，这种情况一次又一次地消失。

<section class="bg-info text-dark text-center text-sm-start"data-bs-ride="carousel">
<div class="carousel-item active bg-light">
<div class="container" >
<div class="d-sm-flex align-items-center justify-content-center">
<!-- carousel -->
<div class="carousel slide " id="demo" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/images/very.jpg" class="d-block width1" alt="...">
<div class="carousel-caption d-none d-sm-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="/images/pubg.jpg" class="d-block width1" alt="...">
<div class="carousel-caption d-none d-sm-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="/images/pes.jpg" class="d-block width1" alt="...">
<div class="carousel-caption d-none d-sm-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#demo" 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="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- carousel -->
<div class="divtwo">
<h1 id="headerOne1" class="text-warning mx-5 px-1 d-sm-block img-fluid w-50 w-ms-auto">Best <span class="text-info">Games</span> </h1>
<p class="lead paragraph mx-5 px-1">Want more amazing games..?</p>
<button type="button" class="btn btn1 btn-outline-warning">Recommended</button>
</div>
</div>
</div>
</div>
</section>

Answer 1

从分区中删除data-bs-ride="carousel"，从分区中移除"carousel-item active"。

这里的结果，

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<section class="bg-info text-dark text-center text-sm-start" >
<div class="bg-light">
<div class="container">
<div class="d-sm-flex align-items-center justify-content-center">
<!-- carousel -->
<div class="carousel slide " id="demo" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/id/237/720/300" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-sm-block ">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/id/238/720/300" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-sm-block ">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>

<div class="carousel-item">
<img src="https://picsum.photos/id/239/720/300" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-sm-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#demo" 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="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- carousel -->
<div class="divtwo">
<h1 id="headerOne1" class="text-warning mx-5 px-1 d-sm-block img-fluid w-50 w-ms-auto">Best <span class="text-info">Games</span> </h1>
<p class="lead paragraph mx-5 px-1">Want more amazing games..?</p>
<button type="button" class="btn btn1 btn-outline-warning">Recommended</button>
</div>
</div>
</div>
</div>
</section>