Question

Not sure if I’m thinking about this the right way. I have a jquery touch carousel that I’m working with and it is populated with about 25 country flags. The carousel shows 10 flags at a time and each flag links to a page with information about that country. The carousel stays persistent on each country page. The carousel is built on unordered list items and I have dynamically set the class of the current slide list item to .slider_current.

The issue I’m having is that the slider starts on slide 1 every time you load a new page, but I want it to start on, or at least show the slide with the the class of .slider_current.

I don’t know js/jquery all too well, so I would appreciate any detailed feedback you could give. I’m reading the documentation and thinking sliderInstance.item is a good place to start, but I don’t know how to mark up what I’m thinking. Or possibly using jquery cookie to grab the id of the slide clicked, and then pass that number to the sliderInstance.goTo method, but I’m not sure how to do that.

The slider documentation can be viewed here: Link to documentation

A demo can be viewed here (this is not my production code, I have that set up locally): Link to demo

Thanks!

Answer 1

this should work :

var sliderInstance = $("#yourCarouselId").touchCarousel({
    /* options go here */
}).data("touchCarousel");   


var index_to_go_to = $(".your-element-class").index();
sliderInstance.goTo(index_to_go_to);