Bootstrap Carousels

Carousel
A slideshow component that, like a carousel, cycles among elements—images or text slides.
How Carousel work
- The carousel is a slideshow that uses CSS 3D transforms and a little JavaScript to cycle through a sequence of content. It can be used with photos, text, or custom markup. Previous/Next buttons and indicators are also supported.
- The carousel will avoid sliding when the webpage is not visible to the user in browsers that use the Page Visibility API (such as when the browser tab is inactive, the browser window is minimized, etc.).
- Please be advised that nested carousels are not supported, and carousels, in general, do not meet accessibility requirements.
- Finally, if you're creating our JavaScript from scratch, you'll need util.js.
Example
Slide dimensions are not automatically normalized in carousels. As a result, you might need to utilize additional tools or custom styles to size content properly. Carousels can have previous/next controls and indicators, although they aren't essential. As you see fit, add and customize.
Set a unique id for optional controls on the .carousel, especially if you're utilizing numerous carousels on the same page.
carousel with Sliders only
Here’s a carousel with slides only. Note the presence of the .d-block and .img-fluid on carousel images to prevent browser default image alignment.
Example:
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
</div>
Carousel With controls
Adding in the previous and next controls in Carousel:
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
carousel With indicators
You can also add the indicators to the carousel, alongside the controls, too
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
carousel Including captions
With the, you can quickly add captions to your presentations. Any. carousel-item can have a carousel-caption element. With optional display utilities, they can be easily hidden on smaller viewports, as demonstrated below. We use .d-none to hide them at first, then .d-none to bring them back on medium-sized devices. d-md-block.
Example:
<div class="carousel-item">
<img src="..." alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>...</h5>
<p>...</p>
</div>
</div>
carousel methods
-
.carousel(options)
Initializes the carousel with an optional options object and starts cycling through items.
Copy
$('.carousel').carousel({
interval: 2000
})
-
.carousel('cycle')
Cycles through the carousel items from left to right.
-
.carousel('pause')
Stops the carousel from cycling through items.
-
.carousel(number)
Cycles the carousel to a particular frame (0 based, similar to an array). Returns to the caller before the target item has been shown (i.e. before the slid.bs.carousel event occurs).
-
.carousel('prev')
Cycles to the previous item. Returns to the caller before the previous item has been shown (i.e. before the slid.bs.carousel event occurs).
-
.carousel('next')
Cycles to the next item. Returns to the caller before the next item has been shown (i.e. before the slid.bs.carousel event occurs).
-
.carousel('dispose')
Destroys an element’s carousel.
Events
Bootstrap’s carousel class exposes two events for hooking in to carousel functionality. Both events have the following additional properties:
- direction: The direction in which the carousel is sliding (either "left" or "right").
- related Target: The DOM element that is being slid into place as the active item.
- from: The index of the current item
- to: The index of the next item
ATutorialHub Related Guide
Comments (9)
User Comments

panduranga gupta
2021-07-05 07:03:13good website for learning and help me a lot

raju
2021-09-25 14:58:47The awsome website i am looking like for a long time, good work atutorialhub team keep doing

Shivani
2021-09-01 15:03:56Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

Harshitha
2021-09-10 15:05:45It is very helpful to students and easy to learn the concepts

Sowmya
2021-09-14 15:06:41Great job Tutorials are easy to understand Please make use of it

Zain Khan
2021-09-18 15:07:23Great content and customized courses.

Rudrakshi Bhatt
2021-09-09 15:08:10Well structured coursed and explained really well!

Pavana Somashekar
2021-09-11 15:09:08Good platform for beginners and learn a lot on this website

Sax
2021-09-25 19:35:50Nice website
Leave a Comment