I made a page that loads post titles in a menu, clicking the titles loads that posts content into a div. Part of the content is a div with a jquery cycle script. So, every page has it’s own slider, with it’s own images and it’s own pager.
Problem: The pager shows buttons for every slide on the page, even those that aren’t showing. For example, I have 3 posts with a slider, post 1 has 2 images in the slider, post 2 has 3 images in the slider, and post 3 has 2 in the slider as well. The pager then shows 7 buttons, on every slider.
Before, it duplicated every time a post was clicked, so it has to do something with the while loop I’m thinking. This is my jquery
// Displaying content for selected category
$('ul.cats li.trigger').click(function(){
var openMainContent = $(this).attr('rel');
$('.the-content#'+openMainContent).show();
$('.the-content').not('#'+openMainContent).hide();
$('.img-slider').cycle('destroy');
// Image slider
$('.img-slider')
.before('<div id="slider-nav" class="slider-nav">')
.cycle({
fx: 'fade',
timeout: 0,
pager: '#slider-nav'
});
});
What do you think makes this happen?
I would try by initializing the cycle plugin only on the new ones. Something like this(haven’t tested that though):
Can you test that and see if it works?
Just a guess: does the
.before()
method adds the closing</div>
tag toid="slider-nav"
? It may cause broken html.