Skip to content

Instantly share code, notes, and snippets.

@dvsqz
Last active April 13, 2022 12:11
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save dvsqz/8816139 to your computer and use it in GitHub Desktop.
Save dvsqz/8816139 to your computer and use it in GitHub Desktop.
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

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