Bootstrap 5 Carousel Slides only
Last Updated :
11 Apr, 2023
Bootstrap 5 Carousel Slides only is a type of carousel where there is nothing in the slides of the carousel like the previous, next buttons, captions, and indicators. This carousel is the easiest one to implement as it has the least amount of components but this has the least user accessibility.
Bootstrap 5 Carousel Slides only classes:
- carousel: This class is used to add to the container holding the whole carousel.
- carousel slide: This class enables the sliding of the carousel in a specific direction.
- carousel-inner: This class is used to the inner content of the carousel.
- carousel-item: This class specifies each item of the carousel.
Syntax:
<div id="..." class="carousel">
<div class="carousel-inner">
<div class="carousel-item">
// Carousel Content
</div>
// Other Carousel Items
</div>
</div>
Example 1: This code example demonstrates a simple slides-only carousel with each slide having different intervals and also the autoplay pauses when it hovers over.
HTML
<!doctype html>
<html lang="en">
<head>
<link href=
rel="stylesheet">
<script src=
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body>
<h1 class="m-4 text-success">
GeeksforGeeks
</h1>
<h4 class="ms-4">
Bootstrap 5 Carousel Slides only
</h4>
<div class="container mb-4 p-4">
<div id="carouselExample"
class="carousel slide"
data-bs-ride="carousel"
data-bs-pause="hover">
<div class="carousel-inner
text-light text-center">
<div class="carousel-item bg-dark active"
data-bs-interval="2000">
<h1 class="m-4 text-success">
This is the first slide
</h1>
<h4 class="m-4">
This slide has a time delay of 2000ms
</h4>
</div>
<div class="carousel-item bg-dark" \
data-bs-interval="4000">
<h1 class="m-4 text-danger">
This is the second slide
</h1>
<h4 class="m-4">
This slide has a time delay of 4000ms
</h4>
</div>
<div class="carousel-item bg-dark"
data-bs-interval="6000">
<h1 class="m-4 text-warning">
This is the third slide
</h1>
<h4 class="m-4">
This slide has a time delay of 6000ms
</h4>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Example 2: This code example demonstrates how to have slides only Bootstrap 5 carousel having images and the carousel in autoplay.
HTML
<!doctype html>
<html lang="en">
<head>
<link href=
rel="stylesheet">
<script src=
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body>
<h1 class="m-4 text-success">
GeeksforGeeks
</h1>
<h4 class="ms-4">
Bootstrap 5 Carousel Slides only
</h4>
<div class="container mb-4 p-4
text-light text-center">
<div id="carouselExample"
class="carousel slide carousel-fade mb-4"
data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item bg-dark active pb-4"
data-bs-interval="3500">
<h1 class="m-4 text-success">
This is the first slide
</h1>
<img src=
width="25%"
alt="GFG LOGO">
</div>
<div class="carousel-item bg-dark pb-4">
<h1 class="m-4 text-warning text-center"
data-bs-interval="3500">
This is the second slide
</h1>
<div class="text-center">
<img src=
width="25%"
alt="GFG LOGO">
</div>
</div>
<div class="carousel-item bg-dark pb-4"
data-bs-interval="3500">
<h1 class="m-4 text-warning">
This is the third slide
</h1>
<div class="text-center">
<img src=
width="25%"
alt="GFG LOGO">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/carousel/#slides-only
Share your thoughts in the comments
Please Login to comment...