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)

HTML

<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>
    </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>
        </div>
                
        <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>
            </div>
        </div>

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

CSS

/*
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; }

jQuery

$(function() {
   $('#slideshow_1').cycle({
        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
    $('.ss1_wrapper').mouseenter(function(){
        $('#slideshow_1').cycle('pause');
    }).mouseleave(function(){
        $('#slideshow_1').cycle('resume');
    });

});

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).