Jquery cycle plugin multiple pager in the same page

Question

I have a problem with cycle plugin multiple pager in the same page I would like to show 24 cycle plugin in the same page. Each plugin contains some picture and information. So I would like to control each other with "pager". Everything is OK, all plugins it works simple document ready function. But I have a quite different problem with pager.

When I try to add pager:"#nav" and .before("<div id="nav"></div>") in the plugin's function. The script creates a container like this <div id="nav"></div> and then plugin appends all pager links in this container. So All pagers links shows in the one container id it causes like this.

http://onur.mayanet.com.tr/test

I want access to something that each plugin should work with its own pager.

Answer 1

IDs in a page have to be unique, so change this:

$('.slideshow').before('<div id="nav"></div>').cycle({
    fx: 'scrollLeft',
    speed: 'fast',
    timeout: 350,
    pager: "#nav"
});

To this:

$('.slideshow').each(function() {
  $(this).before('<div class="nav"></div>').cycle({
    fx: 'scrollLeft',
    speed: 'fast',
    timeout: 350,
    pager: $(this).prev()
  });
});

You can test it out here, all we're doing here is looping through and creating/assigning a pager to each one, rather than using an id which has to be unique. Be sure to change your #nav CSS rules to .nav to match the id => class change as well.