Create beautiful slideshows with jQuery Cycle

Create beautiful slideshows with jQuery Cycle

These are 3 implementations of a simple slideshow using the jQuery Cycle plugin. Feel free to download and customize them to fit your own "slideshow needs".

Code for the first slideshow goes like this:

(the others have similar markup, check out the source on the demo page)


<div class="ss1_wrapper">
    <!-- our next/previous controls -->
    <a href="#" class="slideshow_prev"><span>Previous</span></a>
    <a href="#" class="slideshow_next"><span>Next</span></a>

    <!-- this is where our paging numbers will be generated -->     
    <div class="slideshow_paging"></div>

    <!-- our custom box where the text of the active slide will be shown -->
    <div class="slideshow_box">
        <div class="data"></div>

    <!-- our slideshow -->
    <div id="slideshow_1" class="slideshow">

        <div class="slideshow_item">
            <div class="image"><a href="#"><img src="photos/1.jpg" alt="photo 1" width="900" height="400" /></a></div>
            <div class="data">
                <h4><a href="#">Lorem ipsum dolor sit amet</a></h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin enim sit amet dolor posuere dictum. Pellentesque lacinia metus non erat auctor vehicula.</p>
        <div class="slideshow_item">
            <div class="image"><a href="#"><img src="photos/2.jpg" alt="photo 2" width="900" height="400" /></a></div>
            <div class="data">
                <h4><a href="#">Donec sollicitudin enim sit</a></h4>
                <p>Sed mollis tristique lectus vitae aliquet. Quisque vitae metus ut velit varius feugiat. Maecenas luctus pulvinar elit et viverra. Aenean vel est nulla. </p>

        <!-- other "slideshow_items" go here -->


Using absolute positioning and a transparent png instead of CSS  opacity.
Excuse my messy selectors and "one-liners"  :P 
.ss1_wrapper { position:relative; width:900px; height:400px; margin:0 0 20px 0; }
.ss1_wrapper .slideshow { position:relative; width:900px; height:400px; }
    .ss1_wrapper .slideshow_item { width:900px; height:400px; }
    .ss1_wrapper .slideshow_item .data { display:none; }    
    .ss1_wrapper a.slideshow_prev { position:absolute; left:30px; bottom:180px; z-index:10; width:40px; height:46px; outline:none; background:url(trans-black-70.png); }
        .ss1_wrapper a.slideshow_prev:hover { background:#000; }
        .ss1_wrapper a.slideshow_prev span { display:block; width:40px; height:46px; background:url(arrows.png) no-repeat -55px 50%; text-indent:-9999px; }
    .ss1_wrapper a.slideshow_next { position:absolute; left:70px; bottom:180px; z-index:10; width:40px; height:46px; outline:none; background:url(trans-black-70.png);}
        .ss1_wrapper a.slideshow_next:hover { background:#000; }
        .ss1_wrapper a.slideshow_next span { display:block; width:40px; height:46px; background:url(arrows.png) no-repeat -5px 50%; text-indent:-9999px; }
    .ss1_wrapper .slideshow_paging { position:absolute; bottom:10px; right:545px; z-index:11; font-size:12px; }
        .ss1_wrapper .slideshow_paging a { display:block; float:left; margin:0 0 0 2px; padding:4px 7px; color:#ccc; }
            .ss1_wrapper .slideshow_paging a:hover { color:#fff }
            .ss1_wrapper .slideshow_paging a.activeSlide { background:#eee; color:#222 }
    .ss1_wrapper .slideshow_box { position:absolute; left:30px; bottom:0; background:url(trans-black-70.png); width:340px; height:180px; z-index:10; }
        .ss1_wrapper .slideshow_box .data { padding:15px; color:#ccc;  }
        .ss1_wrapper .slideshow_box .data h4 { color:#fff; font:bold 18px arial, sans-serif; padding:0; margin:0 0 10px 0; }
        .ss1_wrapper .slideshow_box .data p { padding:0; margin:0; line-height:140%;}
        .ss1_wrapper .slideshow_box .data a { color:#fff; }


$(function() {
        fx: 'scrollHorz',       
        easing: 'easeInOutCirc',
        speed:  700, 
        timeout: 5000, 
        pager: '.ss1_wrapper .slideshow_paging', 
        prev: '.ss1_wrapper .slideshow_prev',
        next: '.ss1_wrapper .slideshow_next',
        // using the "before" function, we grab the content of the active slide and show it in our custom box overlay
        before: function(currSlideElement, nextSlideElement) {
            var data = $('.data', $(nextSlideElement)).html();
            $('.ss1_wrapper .slideshow_box .data').fadeOut(300, function(){
                $('.ss1_wrapper .slideshow_box .data').remove();
                $('<div class="data">'+data+'</div>').hide().appendTo('.ss1_wrapper .slideshow_box').fadeIn(600);
    // not using the 'pause' option. instead make the slideshow pause when the mouse is over the whole wrapper


See the demo's source for all three slideshows:

jQuery Cycle plugin

jQuery Cycle has been a very popular jQuery plugin since 2007. I use it regularly to create slideshows, along with the easing plugin.

The usage of the plugin is quite simple; you just call the .cycle method on an element and all the children of this element turn to "slides". But it's actually very powerful because of the huge amount of options available (see the full options reference).


Nikos Tsaganos  •  November 27, 2011 11:14

Just testing :)

Sanchit  •  December 22, 2011 18:49

Nice Slideshow.Your site is looking new so best of luck and write more fresh and unique tutorials.

Nikos Tsaganos  •  December 25, 2011 11:51

Thanks a lot mate! Keep up the good work on

hasan  •  February 15, 2012 19:49

hello. thank you for nice jquery can i use this jquery in commerical?

Nikos Tsaganos  •  February 15, 2012 20:52

Feel free to use in any project.

Peter Pap  •  May 24, 2012 18:51

Nikos its under GPL, MIT licence ?

Pratik  •  July 8, 2012 13:28

Very Nice slideshow

T4Tortilla  •  August 1, 2012 14:53

Hi there

I can't seem to get more than 8 slides working without the navigation ceasing to work.

I have just copied and pasted more div tagged images and all is find until I reach 9 slides and then it stops working - any ideas would be much appreciated.

T4Tortilla  •  August 1, 2012 15:21

I I think I've cracked it - it seemed to be a z-index issue. I could be useful to highlight this area of potential confusion in the tutorial. Otherwise, lovely slideshow.

Many thanks

jeremy  •  September 16, 2012 12:55

any ideas why the panel data fails to display if the cycle 'slideExpr' option is specified or how to solve it?

an example of demo1 with this option set can be seen at it seems that the value of
var data becomes null when slideExpr is set.

jeremy  •  September 16, 2012 18:14

resolved the problem by changing var data to

var data = $(nextSlideElement).parent().find('.data').html();


Web Development  •  November 15, 2012 08:16

i think this is the best tutorial for slideshow. good work keep it up and thanks for sharing with us.

Daniel  •  November 19, 2012 04:24

I added another slideshow_item but it only display 4 slides (in the page box too) without the extra slide. Please advise how to fix it. thanks!

Hugo Leal  •  November 19, 2012 12:14

Hi guys

i can´t put more than 8 images in slideshow#2.
if i put 9 images the navigation disappear.

Any ideas?


Choco  •  November 30, 2012 05:24

I have the same question with Hugo Leal.. When I put more than 8 images in slideshow the navigation disappear..

Anybody can help us?

Cheezee  •  January 14, 2013 13:11

First of all, sorry for my english.
I've solved the problem of the 9 images adding the z-index style to the css, in the line of the "prev" and "next" buttons, it sees like this:

.ss2_wrapper a.slideshow_prev { position:absolute; left:-40px; top:160px; z-index:10; width:40px; height:46px; outline:none; background:url(trans-black-70.png); -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 0 2px #222; -webkit-box-shadow: 0 0 2px #222; box-shadow: 0 0 2px #222; z-index: 2000;}
.ss2_wrapper a.slideshow_next { position:absolute; right:-40px; top:160px; z-index:10; width:40px; height:46px; outline:none; background:url(trans-black-70.png); -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 0 2px #222; -webkit-box-shadow: 0 0 2px #222; box-shadow: 0 0 2px #222; z-index: 2000; }

I hope this would be useful for anyone!!!!

Dianne  •  May 31, 2013 07:48

I love slideshow-3, but needed to make it smaller (600 wide instead of 900). Also the thumbs are the same height as the demo, but had to make them 95 wide instead of 140. I can't get the thumbs to "page", they create 2 lines. Not sure what adjustment to make to keep them on one line. Any help would be greatly appreciated.

Danimal  •  July 1, 2013 20:25

the fixes listed here didn't work for me, so I had to do a little discovery on my own. The Z-index is where the issue is in the CSS.

Everywhere that says z-index:10 change that to z-index:100 and where it says z-index:11 change it to z-index:101

Mebel Jepara  •  February 24, 2014 12:58

I have to learning to make a slider without plugin

Mebel Jati  •  March 26, 2014 15:24

plugin yang bagus, ijinkan saya mencoba plugin slidenya
nice plugin, let me try plugins slides

Meja Makan Minimalis  •  March 26, 2014 15:30

thanks for good plug in's

The Best Christmas Tree  •  June 22, 2014 17:04

Great slideshow.. Watch your head Nikos..

Additional Luggage to your Car  •  June 22, 2014 17:07

This is what I was looking for, be advised beginners still have much to learn ..

Working with Easy Office Document Scanner  •  June 22, 2014 17:10

Thank you for the information that really helped me learn to make slideshows ..

alat bantu sex pria  •  June 24, 2014 11:51

saat ini kebanyakan pria yang kesepian jauh dengan pasangannya yang dikarenakan tuntutan pekerjaan maka dari itu kami memberikan solusi agar anda semua tidak merasa jenuh dan membosankan adapun alat bantu sex pria yang kami tawarkan sangat beragam. Tapi yang jelas semuanya aman dan bebas penyakit.

Umesh Shejole  •  July 18, 2014 15:28

3 slideshow are Nice.

Post your comment

(optional, will not be shown)
NOTE: Any links will have rel="nofollow"