引导区4.6.1转盘显示所有转盘项目，尽管只有一个项目处于活动状态

我一直试图创建一个MySQLi recredset驱动的Boostrap转盘，但无论我做什么，所有幻灯片都会同时显示，尽管只有一个项目在加载时处于活动状态。

<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">

<li data-target="#myCarousel" data-slide-to="128" class="active"></li>

<li data-target="#myCarousel" data-slide-to="182"></li>

<li data-target="#myCarousel" data-slide-to="201"></li>

<li data-target="#myCarousel" data-slide-to="202"></li>

<li data-target="#myCarousel" data-slide-to="203"></li>

<li data-target="#myCarousel" data-slide-to="205"></li>

</ol>

<div class="carousel-inner">

<div class="carousel-item slide128 active">
<div class="container-fluid">
<div class="carousel-caption text-left">
<h1>What is The Vault Arts Centre?</h1>
<p>Unoccupied and boarded up since 2017, Scottish charity Trad Music Trust developed this former bank premises into one of the region&#x27;s most exciting new live music and performing arts venues.</p>
<p><a href="about_the_vault_arts_centre.php" class="btn btn-outline-light" role="button">About</a></p>
</div>
</div>
</div>

<div class="carousel-item slide182">
<div class="container-fluid">
<div class="carousel-caption text-left">
<h1>Venue Hire</h1>
<p>The Vault Arts Centre is perfectly located in the heart of Newton Stewart, has modern facilities including bar and staff and is fully wheelchair accessible.</p>
<p><a href="venue_hire_newton_stewart.php" class="btn btn-outline-light" role="button">Options & Pricing</a></p>
</div>
</div>
</div>

<div class="carousel-item slide201">
<div class="container-fluid">
<div class="carousel-caption text-left">
<h1>Spring Grass Festival - Cup O&#x27; Joe +Support</h1>
<p>Outstanding traditional bluegrass&#x2F;americana&#x2F;folk in May 2022 with Cup O&#x27; Joe, part of the inaugural Spring Grass Festival.  Saturday tickets on sale now.</p>
<p><a href="https:&#x2F;&#x2F;www.thevaultartscentre.co.uk&#x2F;event_info.php?eID=217" class="btn btn-outline-light" role="button">Info & Booking</a></p>
</div>
</div>
</div>

<div class="carousel-item slide202">
<div class="container-fluid">
<div class="carousel-caption text-left">
<h1>Sabbra Cadabra</h1>
<p>THE Black Sabbath Tribute Band return to The Vault Arts Centre on Saturday 5th February 2022 to perform the classic album Paranoid in full!  Tickets on sale now.</p>
<p><a href="event_info.php?eID=221" class="btn btn-outline-light" role="button">Book Online</a></p>
</div>
</div>
</div>

<div class="carousel-item slide203">
<div class="container-fluid">
<div class="carousel-caption text-left">
<h1>Lords of Ruin +Reiver</h1>
<p>North of England heavy rockers Lords of Ruin hit their debut at The Vault on Saturday 5th March 2022 with support from Reiver.</p>
<p><a href="event_info.php?eID=222" class="btn btn-outline-light" role="button">Book Online</a></p>
</div>
</div>
</div>

<div class="carousel-item slide205">
<div class="container-fluid">
<div class="carousel-caption text-left">
<h1>The Jaywalkers</h1>
<p>The Jaywalkers perform live at this year&#x27;s SpringGrass bluegrass festival over 13th-15th May 2022.  Tickets on sale NOW!</p>
<p><a href="https:&#x2F;&#x2F;www.thevaultartscentre.co.uk&#x2F;event_info.php?eID=229" class="btn btn-outline-light" role="button">Info & Booking</a></p>
</div>
</div>
</div>

</div>

<button class="carousel-control-prev" type="button" data-target="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#myCarousel" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>

CSS如下。。。。

/* Carousel base class */
.carousel {
margin-bottom: 0;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
bottom: 3rem;
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel-item {
display: block;
height: 100%;
height: 300px;
}
.carousel-control-prev,
.carousel-control-next {
background: transparent;
border: 0;
width: 5%;
}
.slide128 {
background: url(https://www.thevaultartscentre.co.uk/img/768/DSCF0923banner.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:scroll;   
}
.slide182 {
background: url(https://www.thevaultartscentre.co.uk/img/768/DSCF1038banner.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:scroll;   
}
.slide201 {
background: url(https://www.thevaultartscentre.co.uk/img/768/IMG_0380banner.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:scroll;   
}
.slide202 {
background: url(https://www.thevaultartscentre.co.uk/img/768/RebelRockPhotography10.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:scroll;   
}
.slide203 {
background: url(https://www.thevaultartscentre.co.uk/img/768/LordsofRuinBanner.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:scroll;   
}
.slide205 {
background: url(https://www.thevaultartscentre.co.uk/img/768/Promo-5banner.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:scroll;   
}


@media (min-width:992px){
.slide128 {
background: url(https://www.thevaultartscentre.co.uk/img/992/DSCF0923banner.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:scroll;
}
.slide182 {
background: url(https://www.thevaultartscentre.co.uk/img/992/DSCF1038banner.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:scroll;
}
.slide201 {
background: url(https://www.thevaultartscentre.co.uk/img/992/IMG_0380banner.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:scroll;
}
.slide202 {
background: url(https://www.thevaultartscentre.co.uk/img/992/RebelRockPhotography10.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:scroll;
}
.slide203 {
background: url(https://www.thevaultartscentre.co.uk/img/992/LordsofRuinBanner.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:scroll;
}
.slide205 {
background: url(https://www.thevaultartscentre.co.uk/img/992/Promo-5banner.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:scroll;
}

}

@media (min-width:1200px){
.slide128 {
background: url(https://www.thevaultartscentre.co.uk/img/1200/DSCF0923banner.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:scroll;
}
.slide182 {
background: url(https://www.thevaultartscentre.co.uk/img/1200/DSCF1038banner.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:scroll;
}
.slide201 {
background: url(https://www.thevaultartscentre.co.uk/img/1200/IMG_0380banner.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:scroll;
}
.slide202 {
background: url(https://www.thevaultartscentre.co.uk/img/1200/RebelRockPhotography10.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:scroll;
}
.slide203 {
background: url(https://www.thevaultartscentre.co.uk/img/1200/LordsofRuinBanner.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:scroll;
}
.slide205 {
background: url(https://www.thevaultartscentre.co.uk/img/1200/Promo-5banner.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:scroll;
}

}

@media (min-width:1366px){
.slide128 {
background: url(https://www.thevaultartscentre.co.uk/img/DSCF0923banner.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:scroll;
}
.slide182 {
background: url(https://www.thevaultartscentre.co.uk/img/DSCF1038banner.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:scroll;
}
.slide201 {
background: url(https://www.thevaultartscentre.co.uk/img/IMG_0380banner.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:scroll;
}
.slide202 {
background: url(https://www.thevaultartscentre.co.uk/img/RebelRockPhotography10.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:scroll;
}
.slide203 {
background: url(https://www.thevaultartscentre.co.uk/img/LordsofRuinBanner.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:scroll;
}
.slide205 {
background: url(https://www.thevaultartscentre.co.uk/img/Promo-5banner.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:scroll;
}

}

我在JSFiddle上设置了这个(https://jsfiddle.net/j9k2uLr3/4/)很高兴看到同样的问题正在发生。我做错了什么？

谢谢。

由于您的CSS，所有项目都堆叠在一起：

更改

.carousel-item {
display: block;
height: 100%;
height: 300px;
}

至

.carousel-item {
height: 300px;
}

如果您屏蔽了所有的carousel-item，那么它们将在屏幕上保持自己，从而保持堆栈。此外，您不需要两个height，只需要最后一个即可。因此，请移除height: 100%;。

您的CDN出现问题。您正在导入bootstrap.bundle.js和popper.js。Bootstrap Bundle中已经有popper，所以它发生了冲突。删除popper.js导入

进行这两项更改，您的转盘应该可以正常工作。

相关内容

最新更新

热门标签：