I am working on an HTML site and I am using the bootstrap 5 frameworks.
MY GOAL is to add bootstrap 5 Carousel in my section next to an image, like show in this image.
[https://imgur.com/a/JSvH2nw]
I have directly copied Carousel code from bootstrap docs here is the link
https://getbootstrap.com/docs/5.1/components/carousel/#slides-only
But for some reason, the Carousel is not showing any content it is only showing controls and slider buttons like this
what m i doing wrong?
<html lang="de">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Playfair Display:wght@400;500;600;700;800;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,300;1,400&display=swap"
rel="stylesheet">
<!-- Bootstrap icon -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<body>
<div >
<div >
<div >
<div id="carouselExampleDark" data-bs-ride="carousel">
<div >
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div >
<div data-bs-interval="10000">
<img src="..." alt="...">
<div >
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div data-bs-interval="2000">
<img src="..." alt="...">
<div >
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div >
<img src="..." alt="...">
<div >
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
<span aria-hidden="true"></span>
<span >Previous</span>
</button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
<span aria-hidden="true"></span>
<span >Next</span>
</button>
</div>
</div>
<div >
<img src="orignal/feedbacksecimg.png" alt="cleaningImage">
</div>
<span ><a href="#" >Mehr
erfahren</a></span>
</div>
</div>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-7 zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-
</body>
</html>
html ```
CodePudding user response：
You need to replace ... with actual image link
where the img tag is in your html code
<img src="..." alt="...">
like this :
<img src="..." alt="...">
Update:
if you want carousel without image you can do that by following:
<div >
<div data-bs-interval="10000" >
<!-- <img src="https://cdn.pixabay.com/photo/2015/10/29/14/38/web-1012467__340.jpg" alt="..."> -->
<div >
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div data-bs-interval="2000">
<!-- <img src="https://img.freepik.com/free-vector/abstract-dotted-banner-background_1035-18160.jpg?size=626&ext=jpg" alt="..."> -->
<div >
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div >
<!-- <img src="https://static.vecteezy.com/system/resources/thumbnails/001/234/358/small/modern-blue-halftone-banner-background.jpg" alt="..."> -->
<div >
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
Simple trick: just remove the img tags from the html and remove carousel-caption class from the caption text div
alternatively you can use owl carousel to create beautiful carousels just like what you want
Here is a jsbin link i created with your code. https://jsbin.com/rufivuwije/edit?html,output
CodePudding user response：
Note that the image address in your code should be changed to your own image address.
<img src="..." alt="...">