I am using bootstrap 5 carousel and added 9 items
The first item is YouTube video and the other 7 items is empty Divs with background-image
the problem is the first three items is the only working items and I just see three indicators
And when I try to display the fourth item, the carousel stops working
<section >
<div id="carouselExampleIndicators" data-bs-ride="carousel">
<div >
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
aria-label="Slide 3"></button>
</div>
<div >
<div >
<iframe src="https://www.youtube.com/embed/Z6nvbmqYR9g"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
<div >
</div>
<div >
</div>
<div >
</div>
<div >
</div>
<div >
</div>
<div >
</div>
<div >
</div>
<div >
</div>
</div>
<button type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide="prev">
<span aria-hidden="true"></span>
<span >Previous</span>
</button>
<button type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide="next">
<span aria-hidden="true"></span>
<span >Next</span>
</button>
</div>
</section>
CodePudding user response:
Think about it, you only have 3 buttons, so that must be something with that, try adding more buttons.
<section >
<div id="carouselExampleIndicators" data-bs-ride="carousel">
<div >
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4"
aria-label="Slide 4"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="5"
aria-label="Slide 5"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="6"
aria-label="Slide 6"></button>
</div>
// And more buttons
<div >
<div >
<iframe src="https://www.youtube.com/embed/Z6nvbmqYR9g"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
<div >
</div>
<div >
</div>
<div >
</div>
<div >
</div>
<div >
</div>
<div >
</div>
<div >
</div>
<div >
</div>
</div>
<button type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide="prev">
<span aria-hidden="true"></span>
<span >Previous</span>
</button>
<button type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide="next">
<span aria-hidden="true"></span>
<span >Next</span>
</button>
</div>
</section>
CodePudding user response:
You have only three carousel indicator. You can take off carousel indicator or add 4 more divs .
Here is a working fiddle that i modified your code.
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<section >
<div id="carouselExampleIndicators" data-bs-ride="carousel">
<div >
<div >
<iframe src="https://www.youtube.com/embed/Z6nvbmqYR9g"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
<div ><img src="https://via.placeholder.com/150">
</div>
<div ><img src="https://via.placeholder.com/250">
</div>
<div ><img src="https://via.placeholder.com/350">
</div>
<div ><img src="https://via.placeholder.com/450">
</div>
<div ><img src="https://via.placeholder.com/550">
</div>
<div ><img src="https://via.placeholder.com/650">
</div>
<div ><img src="https://via.placeholder.com/750">
</div>
<div ><img src="https://via.placeholder.com/850">
</div>
</div>
<button type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide="prev">
<span aria-hidden="true"></span>
<span >Previous</span>
</button>
<button type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide="next">
<span aria-hidden="true"></span>
<span >Next</span>
</button>
</div>
</section>