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:

Carousel With controls

Adding in the previous and next controls in Carousel:

carousel With indicators

You can also add the indicators to the carousel, alongside the controls, too

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:

carousel methods

• .carousel(options)

Initializes the carousel with an optional options object and starts cycling through items.

Copy

• .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