Question

I’m using a jQuery carousel plugin called anythingslider. It pops up and is activated by clicking on any one of a group of six buttons. You can see from below that as I iterate over the items in a JSON object I attach an event to each button using the iteration variable b and also provide that as an argument to the configuration option startPanel for the carousel. So the goal is simply to start the carousel at the slide corresponding to each button.

Okay, fine. When I load the page and click on any button the carousel does indeed appear with the correct corresponding slide as the start slide. But when I set the carousel’s CSS to display: none and click on another button, the carousel still starts at the slide corresponding to the button first clicked after page load and continues to do so no matter what button is clicked thereafter. How do I truly reset the carousel for each button’s click event?

$.each(objectFromJSONFile, function (b, a) {
    $("#start-button" + b).click(function () {
        $('#stories').anythingSlider({
            startPanel: b
        });
    });
};

Thanks very much.

Answer 1

Looks like passing a slide index to the slider will set the current slide. You’re almost there in your example–just call directly using the index variable (b):

$.each(objectFromJSONFile, function (b, a) {
  $("#start-button" + b).click(function () {
    $('#stories').anythingSlider(b);
  });
};