How to Handle the Bootstrap 4 Carousel Image Slide Event: A Complete Guide

Use the slide.bs.carousel event to run custom code when a Bootstrap 4 carousel image slide begins, or slid.bs.carousel to execute after the animation completes.

The Bootstrap 4 carousel component in the twbs/bootstrap repository exposes custom JavaScript events that fire during slide transitions. Understanding how to hook into the bootstrap 4 carousel image slide event allows you to execute custom logic—such as lazy-loading images, updating captions, or tracking analytics—at the exact moment a slide change starts or finishes.

Understanding Bootstrap 4 Carousel Slide Events

Bootstrap 4 emits two distinct events during every slide transition in the carousel component. Knowing the difference between these events ensures your custom functions execute at the correct moment in the animation lifecycle.

The slide.bs.carousel Event

The slide.bs.carousel event fires immediately when a slide transition begins. This is the primary hook for running code as the user navigates to a new image. According to the source code in js/src/carousel.js, this event is triggered via EventHandler.trigger(this._element, EVENT_SLIDE, ...) before any visual animation starts.

The slid.bs.carousel Event

The slid.bs.carousel event fires after the slide transition completes and the new image is fully visible. Use this event when you need to run logic that depends on the slide being completely rendered, such as focusing an element inside the new slide or triggering secondary animations.

Implementing the slide.bs.carousel Event Handler

To execute a function when a slide begins, attach an event listener to the carousel element using jQuery or vanilla JavaScript. The event object passed to your handler contains critical data about the transition.

Here is the standard implementation pattern:

// Initialize carousel (optional if using data-attributes)
$('#myCarousel').carousel({ interval: 5000 });

// Attach handler for the bootstrap 4 carousel image slide event
$('#myCarousel').on('slide.bs.carousel', function (event) {
  // Custom logic runs as soon as transition starts
  console.log('Slide transition initiated');
  
  // Access the upcoming slide element
  const nextSlide = $(event.relatedTarget);
  
  // Example: Extract caption text
  const caption = nextSlide.find('.carousel-caption').text();
  console.log(`Moving to slide: ${caption}`);
});

Accessing Event Properties and Data

The event object provided to your handler contains four important properties that describe the transition state. These properties are defined in the Carousel class within js/src/carousel.js:

• direction: A string indicating the slide direction, either "left" or "right".
• relatedTarget: The DOM element that is about to become active (the incoming slide).
• from: The zero-based index of the current slide being replaced.
• to: The zero-based index of the target slide that will be displayed.

You can use these properties to conditionally run code based on which slide is next:

$('#myCarousel').on('slide.bs.carousel', function (event) {
  // Log transition details
  console.log(`Moving from slide ${event.from} to slide ${event.to}`);
  console.log(`Direction: ${event.direction}`);
  
  // Specific logic for the first slide
  if (event.to === 0) {
    console.log('Returned to first slide');
  }
});

Where Carousel Events Are Defined in the Source Code

The bootstrap 4 carousel image slide event mechanism is implemented in the core JavaScript files of the repository. Understanding these file locations helps when debugging or extending functionality.

Core Implementation File

The primary source file is js/src/carousel.js, which contains the Carousel class definition. In this file, the constants EVENT_SLIDE (mapped to slide.bs.carousel) and EVENT_SLID (mapped to slid.bs.carousel) are triggered using the internal EventHandler utility at precise moments during the transition cycle.

Distribution and Bundle Files

For production environments, the compiled code resides in dist/js/bootstrap.bundle.js (which includes Popper.js) or dist/js/bootstrap.js (standalone). These files contain the minified versions of the event triggering logic found in the source directory.

Unit Test Reference

The behavior of these events is validated in js/tests/unit/carousel.spec.js, which demonstrates proper event attachment, triggering sequences, and property verification. Consulting this file provides additional implementation examples and edge case handling.

Using slid.bs.carousel for Post-Transition Logic

When your function must run only after the slide animation finishes—such as when resetting animation states or loading high-resolution images—use the slid.bs.carousel event instead:

$('#myCarousel').on('slid.bs.carousel', function (event) {
  // Runs after CSS transition completes
  console.log('Slide transition finished');
  
  // Safe to manipulate fully visible slide
  $(event.relatedTarget).addClass('animation-complete');
});

Summary

• Use slide.bs.carousel to execute code the moment a slide transition begins, before the animation completes.
• Use slid.bs.carousel to run functions after the slide animation finishes and the new image is stable.
• Access transition metadata via event.direction, event.from, event.to, and event.relatedTarget.
• The event logic is implemented in js/src/carousel.js and distributed via dist/js/bootstrap.bundle.js.
• Unit tests in js/tests/unit/carousel.spec.js demonstrate proper event handling patterns.

Frequently Asked Questions

What is the difference between slide.bs.carousel and slid.bs.carousel?

The slide.bs.carousel event fires immediately when a slide transition is initiated, allowing you to intercept the process before visual movement begins. The slid.bs.carousel event fires only after the CSS transition completes and the new slide is fully visible, making it suitable for cleanup tasks or post-load actions.

How do I get the index of the next slide in Bootstrap 4 carousel events?

Access the event.to property within your event handler. This integer represents the zero-based index of the target slide that will become active. Similarly, event.from contains the index of the slide currently being replaced.

Can I pause the carousel during the slide event?

Yes. Inside your slide.bs.carousel handler, you can call $(this).carousel('pause') to stop the automatic cycling. However, note that pausing during the transition will not prevent the current slide change from completing; it only prevents subsequent automatic advances.

Where is the slide event triggered in Bootstrap 4 source code?

The event is triggered in js/src/carousel.js within the Carousel class methods that manage transitions. Specifically, the code uses EventHandler.trigger(this._element, EVENT_SLIDE, {...}) to emit the custom event, passing the direction, from/to indices, and related target element as part of the event detail object.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}