CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
chemnteach
chemnteach

Reputation: 395

Skipping to Another Slide in Bootstrap Carousel Based on DOM Element Instead of Index

I would like to be able to skip to a specific slide in the Bootstrap carousel slide stack based on an element (e.g., id or class) value instead of slide index as described in the Bootstrap documentation. Has anyone developed an elegant methodology for doing this that they could share?

Upvotes: 1

Views: 783

Answers (2)

Uptown Apps
Uptown Apps

Reputation: 707

Here's an example of a solution that seems to work decently well:

http://www.bootply.com/2VP1T6PGxW

Each slide has an index stored in a data-* attribute (data-* documentation) on the element. It also has an ID to be referenced by later:

<div class="item active" id="firstSlide" data-index="0">

When the button is pressed, use jQuery to find the DOM element and pull the data-index out and then use the Bootstrap carousel functions as documented:

var index = $("#secondSlide").data('index');
$("#carousel-example-generic").carousel(index);

Upvotes: 1

chemnteach
chemnteach

Reputation: 395

I'm not sure that this is the most elegant approach, if not hopefully others will add a better approach. When I load the data for the carousel slides I create an array of slide index vs. the elements that the user would want to skip to. When the user requests to skip to the element (using a button on the Nav bar) I identify the current location by finding the .active class and extracting the html from the current view. This HTML contains the identifier for the element of interest, which can be used post substring() extraction to look up the index in the array of slide index and then use that index in $('#carousel').carousel(index).

Upvotes: 0

Related Questions