VOOZH about

URL: https://www.geeksforgeeks.org/bootstrap/bootstrap-carousel/

⇱ Bootstrap Carousel - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

Bootstrap Carousel

Last Updated : 8 Apr, 2024

Bootstrap Carousel enables slideshow functionality for images or content. Easily customizable with CSS and JavaScript. Supports responsive design and touch gestures, enhancing user experience in web development projects.

It can be included in your webpage using "bootstrap.js" or "bootstrap.min.js". Carousels are not supported properly in Internet Explorer, this is because they use CSS3 transitions and animations to achieve the slide effect.

This is how we can create an image slideshow using the Bootstrap carousel.

Examples of Bootstrap Carousel

Example 1: In this example, we include a Bootstrap carousel with indicators, images, and navigation controls for the previous and next slides. It utilizes Bootstrap CSS and JavaScript libraries for styling and functionality.

Output:

👁 Carousel-1
Bootstrap Carousel Example Output

Explanation

  • Wrapper for slides: Div with class="carousel-inner" contains slides, each specified within a div class="item".
  • Outermost div: Div with class="carousel" indicates the carousel, with data-ride="carousel" for automatic sliding.
  • Indicators: Ordered list with class="carousel-indicators" provides dots indicating slides.
  • Left and right controls: Buttons with data-slide attribute allow manual navigation.
  • Adding captions: Use class="carousel-caption" within each div class="item".

Example 2: In this example we features a Bootstrap carousel with two slides, each containing an image and a caption. Navigation controls allow users to move between slides. It uses Bootstrap for styling and functionality.

Output:

👁 Carousel-2
Bootstrap Carousel Example Output
  • CYCLE: It cycles through the carousel from left to right.

Example:

  • PAUSE: Stops the carousel from moving wherever you want.

Example:

  • NUMBER: It cycles the carousel according to a particular frame(starting from 0, just like in an array).

Example:

  • PREV: Cycles the carousel to its previous image, it's just like we did earlier in the bootstrap part.

Example:

  • NEXT: Cycles the carousel to its next image, it's the same as we did in the bootstrap part of the carousel.

Example:

Supported Browsers:

Comment
Article Tags:

Explore