jQuery Cycle is a great plugin to create image slides on your website. Out-of-the-box, it is so simple to use but you can explore the options extensively to get the functions and effect that you expected.
One of the best feature is the ‘pager’ option that will create a pagination of your slideshow. By default, the function will look up for a container with ID value of ‘pager’ and generate this code:
[syntax_prettify linenums=””]
<div id="pager">
<a href="#" class="">1</a>
<a href="#" class="">2</a>
<a href="#" class="activeSlide">3</a>
</div>
[/syntax_prettify]
Without any style, the pager will be shown simply as “123” on the front-end. You can of course stylize it any way you like it, I used to fancy the background-image replacement technique, but I want to share the CSS codes that will display it as dots or bullets. Since this is pure CSS, you can easily change the colors or size quickly and easily.
[syntax_prettify linenums=””]
#pager {
/* you can add positioning properties here if needed */
width: 75px; /* change as required */
padding: 0;
height: 14px;
z-index: 999;
}
#pager a {
display: block;
float: left;
width: 10px;
height: 10px;
text-indent: -999em;
background: #fff;
border-radius: 10px; /* must be the same as width and height */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0 0 1px 1px #707173; /* border color */
margin-right: 10px;
}
#pager a {
background: #c0c0c0; /* optional: color when hovered */
}
#pager a.activeSlide {
background: #707173; /* color when active */
}
[/syntax_prettify]
Quick preview of how it will look like:
There you go. Simple pager for a great slideshow plugin.
thanx for useful material)
have used in my project)
New to this. Do I need to enter a script type or something in the header?
Hi Andy – Yes, you need to install jQuery Cycle plugin first, following their docs: http://jquery.malsup.com/cycle/options.html. Then customize it using the tutorial provided in this post.
Sorry, thought I should add a bit more here – in the jquery.cycle.all.latest.js file I located this:
onPagerEvent: null,
onPrevNextEvent: null,
pager: null,
pagerAnchorBuilder: null,
pagerEvent: ‘click.cycle’,
pause: 0,
pauseOnPagerHover: 0,
Maybe I need to change one or more of these for it to work? Thanks again!
Hello, thanks so much for sharing your idea. I am struggling to make the navigation dots work and I wonder if you could help me see where I’ve gone wrong… I put the div tag above where I want the dots to be (directly below the slideshow) and then added the #pager code to the css sheet. But the dots come up all in a line on top of each other and don’t change with the images… I have downloaded both jquery-latest.min.js and jquery.cycle.all.latest.js onto my site and refer to them in the . Is there another file I need to add to make the dots work? Sorry if I am being a bit slow, I’ve never used jquery before and it is proving quite a challenge! Thanks so, so much 🙂
Hi Helen – Can you please confirm if you are using jQuery Cycle version 1 or 2? If you can share your under-development page, it would really help for me to understand how it is structured and hopefully find the cause of this issue you are facing.