Skip to content

Instantly share code, notes, and snippets.

@dvsqz

dvsqz/carousel-indicators.js

Last active April 13, 2022 12:11
Show Gist options
  • Save dvsqz/8816139 to your computer and use it in GitHub Desktop.
Save dvsqz/8816139 to your computer and use it in GitHub Desktop.
Download ZIP
Auto-generate Bootstrap Carousel Indicator HTML
@rokinroj
Copy link

This is sweet! Thanks!

@JakubNei
Copy link

luv u

@polotto
Copy link

polotto commented Jan 14, 2022 •
edited
Loading

Updated for Bootstrap 5:

// Auto-generate carousel indicator html
var bootCarousel = $(".carousel");
bootCarousel.append("<ol class='carousel-indicators'></ol>");
var indicators = $(".carousel-indicators");
bootCarousel.find(".carousel-inner").children(".carousel-item").each(function(index) {
    (index === 0) ?
    indicators.append("<li data-bs-target='#MyCarousel' data-bs-slide-to='" + index + "' class='active'></li>") :
    indicators.append("<li data-bs-target='#MyCarousel' data-bs-slide-to='" + index + "'></li>");
});

@exidmen
Copy link

exidmen commented Apr 13, 2022

Updated for Bootstrap 5:

// Auto-generate carousel indicator html
var bootCarousel = $(".carousel");
bootCarousel.append("<ol class='carousel-indicators'></ol>");
var indicators = $(".carousel-indicators");
bootCarousel.find(".carousel-inner").children(".carousel-item").each(function(index) {
    (index === 0) ?
    indicators.append("<li data-bs-target='#MyCarousel' data-bs-slide-to='" + index + "' class='active'></li>") :
    indicators.append("<li data-bs-target='#MyCarousel' data-bs-slide-to='" + index + "'></li>");
});

The indicators are displayed, but only the first one is active, the others do not change.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment