Bootstrap Carousels

Bootstrap Carousels
Nikhil
Published on 2021-07-24 12:41:17

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 (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website