• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Carousel

← Previous Next →

Carousels are dynamic, rotating content containers that allow you to display multiple items, images, or text in a sliding format. In Bootstrap 4, the carousel component provides a convenient way to showcase images, highlights, or promotions on a website without taking up excessive space. It can be controlled via indicators, navigation arrows, or automatically through timed transitions, making it versatile for many use cases.

Basic Carousel Structure

A carousel in Bootstrap 4 requires a parent <div> with the class carousel and a unique id. Inside it, you define carousel-inner to hold individual slides, each wrapped in a carousel-item. The first item must have the active class to display initially.

<div id="exampleCarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="image1.jpg" class="d-block w-100" alt="Slide 1">
    </div>
    <div class="carousel-item">
      <img src="image2.jpg" class="d-block w-100" alt="Slide 2">
    </div>
    <div class="carousel-item">
      <img src="image3.jpg" class="d-block w-100" alt="Slide 3">
    </div>
  </div>
</div>

Explanation:

  • carousel slide enables the sliding effect.

  • data-ride="carousel" makes the carousel start automatically.

  • d-block w-100 ensures images are displayed as block-level elements and span the full width of the container.

Carousel Indicators

Indicators are small clickable elements that allow users to navigate to a specific slide. They are typically represented as dots below the carousel.

<ol class="carousel-indicators">
  <li data-target="#exampleCarousel" data-slide-to="0" class="active"></li>
  <li data-target="#exampleCarousel" data-slide-to="1"></li>
  <li data-target="#exampleCarousel" data-slide-to="2"></li>
</ol>

  • data-slide-to indicates the slide index.

  • The active class highlights the current slide.

  • Indicators improve user navigation and provide visual feedback about the number of slides.

Carousel Controls

Navigation arrows allow users to move between slides manually. Bootstrap provides carousel-control-prev and carousel-control-next for left and right navigation.

<a class="carousel-control-prev" href="#exampleCarousel" 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="#exampleCarousel" role="button" data-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>

  • carousel-control-prev-icon and carousel-control-next-icon provide default arrow icons.

  • sr-only spans improve accessibility for screen readers.

  • Users can navigate slides without relying on automatic transitions.

Captions and Overlays

Each slide can include a caption for titles or descriptions. Captions appear as overlays and can include headings, paragraphs, and even buttons.

<div class="carousel-item active">
  <img src="image1.jpg" class="d-block w-100" alt="Slide 1">
  <div class="carousel-caption d-none d-md-block">
    <h5>First Slide Title</h5>
    <p>This is a description for the first slide.</p>
  </div>
</div>

  • carousel-caption positions text over the slide.

  • d-none d-md-block hides captions on smaller screens for better visibility.

  • Captions enhance context and improve content understanding.

Auto Slide Interval

Bootstrap 4 allows controlling the speed of slide transitions with data-interval. By default, slides transition every 5 seconds.

<div id="exampleCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">

  • data-interval="3000" changes the slide every 3 seconds.

  • Set data-interval="false" to disable automatic sliding.

Pausing Carousel on Hover

You can pause automatic sliding when users hover over the carousel using data-pause="hover".

<div id="exampleCarousel" class="carousel slide" data-ride="carousel" data-pause="hover">

  • Enhances user control by allowing time to read captions or view content without interruption.

Responsive Considerations

  • Ensure images are responsive using d-block w-100.

  • Use optimized images to reduce loading times.

  • Avoid excessive captions or text on small screens.

  • Test across devices to ensure smooth transitions and touch responsiveness.

Best Practices

  • Keep the number of slides manageable to maintain user attention.

  • Use high-quality, properly sized images for clarity.

  • Combine automatic and manual controls for the best user experience.

  • Ensure proper alt text for accessibility.

  • Avoid auto-playing videos in slides as it may hinder performance.

Summary of the Tutorial

This tutorial covered the Bootstrap 4 carousel component and its usage. You learned:

  • How to structure a basic carousel using carousel-inner and carousel-item.

  • Adding indicators for slide navigation.

  • Using previous and next controls for manual navigation.

  • Including captions and overlays to enhance slide content.

  • Controlling slide intervals and pausing on hover.

  • Best practices for responsive images, accessibility, and performance.

Bootstrap 4 carousels provide an interactive way to display multiple items, enhancing user engagement without occupying excessive space. Proper use ensures a smooth, visually appealing experience across devices.

Practice Questions

  1. Create a basic carousel with three slides, each containing a different image.

  2. Add indicators to a carousel so users can click to navigate to a specific slide.

  3. Include previous and next controls on a carousel to allow manual navigation.

  4. Create a carousel with captions for each slide, including a heading and a short paragraph.

  5. Set up a carousel that automatically slides every 3 seconds using data-interval.

  6. Build a carousel that pauses when the user hovers over it using data-pause="hover".

  7. Create a responsive carousel where images scale to full width using d-block w-100.

  8. Combine captions and buttons in a carousel slide to highlight a call-to-action.

  9. Build a carousel with four slides and ensure the first slide is set as active.

  10. Create a carousel with different sized images and ensure all slides maintain the same height for a consistent layout.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

Bootstrap 4

online coding class codepractice

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

codepractice logo
Login
Go Back Top