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)

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


Comments

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 www.jqueryrain.com

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

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 http://www.shaadibay.com/cycle/demo.html 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();

thanks

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?

Thanks

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

Hi!!!
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!!!!
Adios!!!!

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.

alat bantu sex wanita  •  August 5, 2014 17:21

Sekarang ini alat bantu sex banyak di minati oleh para pasutri, karena bisa membantu untuk meningkatkan kualitas hubungan seksual seperti melakukan foreplay hal ini bisa membangkitkan libido.

alat bantu sex wanita  •  August 5, 2014 17:23

Sekarang ini alat bantu sex banyak di minati oleh para pasutri, karena bisa membantu untuk meningkatkan kualitas hubungan seksual seperti melakukan foreplay hal ini bisa membangkitkan libido.

Babu  •  August 10, 2014 14:55

i want the span(content). only when mouse hover... how to do that

Taruhan Bola  •  August 31, 2014 13:02

not work for my site, please chek

alat bantu sex  •  September 9, 2014 12:28

I think this is among the most vital info for me. And i am glad reading your article. But want to remark on some general things, The site style is great, the articles is really great

alat bantu sex  •  September 9, 2014 12:29

interesting and useful article for me thank you

toko alat bantu sex  •  September 12, 2014 02:50

you are quite encouraging information for your web visitors. I personally also really like your conten this, which is interesting to me ucapka thank you.
greetings

Obat perangsang wanita  •  October 16, 2014 08:23

Thank you for all the information that is given

Alat pembesar payudara  •  October 16, 2014 08:24

This is a good website all the info provided very helpful

Alat bantu sex  •  October 16, 2014 08:25

I am happy to find your website and can join to comment
I think is very valuable to be able to read your writing, and on this occasion will I use for my reference source
Thank you so much for sharing, I hope you continue to write spirit next topic

Furniture Jepara  •  October 21, 2014 00:45

MEBEL JEPARA | UKIRAN MEBEL JEPARA | UKIR JEPARA | FURNITURE JATI
MEBEL JEPARA
UKIRAN MEBEL JEPARA
UKIR JEPARA
FURNITURE JATI
FURNITURE JATI JEPARA
FURNITURE JEPARA
FURNITURE MINIMALIS
MEBEL JATI
UKIRAN JEPARA
MEBEL JEPARA MURAH
HARGA MEBEL JEPARA
MEBEL MINIMALIS JEPARA
MEBEL UKIR
FURNITURE JATI UKIR
MEBEL MEWAH
MEBEL JEPARA APIK
MEBEL MINIMALIS
MEBEL MURAH
PETI JENAZAH JEPARA
MINIMALIS JEPARA
FURNITURE MURAH
FURNITURE MEWAH
FURNITURE KUALITAS

Mebel Jepara  •  October 21, 2014 00:47

MEBEL JEPARA | UKIRAN MEBEL JEPARA | UKIR JEPARA | FURNITURE JATI
MEBEL JEPARA
UKIRAN MEBEL JEPARA
UKIR JEPARA
FURNITURE JATI
FURNITURE JATI JEPARA
FURNITURE JEPARA
FURNITURE MINIMALIS
MEBEL JATI
UKIRAN JEPARA
MEBEL JEPARA MURAH
HARGA MEBEL JEPARA
MEBEL MINIMALIS JEPARA
MEBEL UKIR
FURNITURE JATI UKIR
MEBEL MEWAH
MEBEL JEPARA APIK

vimax asli  •  October 26, 2014 09:45


Thank you for sharing
I've been looking for, and it can be an idea from here
I hope to be useful also for other people

vimax extender asli  •  October 26, 2014 09:50

Thank you for sharing
I've been looking for, and it can be an idea from here

Mebel Jepara Ukir  •  October 27, 2014 18:54

Blog you post good

FURNITURE JATI JEPARA

http://ww.ukiranmebeljepara.com

Mebel Minimalis  •  October 27, 2014 18:58

thank you min

http://ukiranmebeljepara.com/kursi-raja-ukiran-macan/
http://ukiranmebeljepara.com/kursi-kubah/
http://ukiranmebeljepara.com/kursi-sofa-sandar-tinggi/
http://ukiranmebeljepara.com/kursi-meja-magic/
http://ukiranmebeljepara.com/dekorasi-jawa-mentah/
http://ukiranmebeljepara.com/dekorasi-pernikahan-modern/
http://ukiranmebeljepara.com/gambar-model-desain-meja-kayu-solid-trembesi-meh/
http://ukiranmebeljepara.com/jam-lemari-jati/
http://ukiranmebeljepara.com/lemari-pakaian-minimalis-kotak/
http://ukiranmebeljepara.com/lemari-hias-setengah-lingkaran/
http://ukiranmebeljepara.com/lemari-pakaian-minimalis-3-pintu/
http://ukiranmebeljepara.com/lemari-pakaian-minimalis-cat-putih/
http://ukiranmebeljepara.com/lemari-pakaian-minimalis-cat-duco/
http://ukiranmebeljepara.com/lemari-pakaian-cat-duco-emas/
http://ukiranmebeljepara.com/lemari-pakaian-cat-duco/
http://ukiranmebeljepara.com/kursi-tamu-jati-ganesa/
http://ukiranmebeljepara.com/kursi-tamu-ganesa-mewah-cat-emas/
http://ukiranmebeljepara.com/ayunan-kayu-cat-duco/
http://ukiranmebeljepara.com/kursi-meja-makan-kayu-trembesi/
http://ukiranmebeljepara.com/bangko-taman-trembesi/
http://ukiranmebeljepara.com/meja-makan-kayu-solid/
http://ukiranmebeljepara.com/meja-makan-meh/
http://ukiranmebeljepara.com/ukiran-relief-kaligrafi-arab/
http://ukiranmebeljepara.com/kursi-ukiran-naga/
http://ukiranmebeljepara.com/kursi-aladin-ukir/
http://ukiranmebeljepara.com/kursi-tamu-antik-minimalis-jepara/
http://ukiranmebeljepara.com/kursi-tamu-semut-jati/
http://ukiranmebeljepara.com/kursi-teras-kepiting-rajungan/
http://ukiranmebeljepara.com/jual-gebyok-ukiran-pintu-rumah/
http://ukiranmebeljepara.com/peti-mati-ukiran-naga/
http://ukiranmebeljepara.com/peti-mati-jati-ukir/
http://ukiranmebeljepara.com/peti-mati-ukir/
http://ukiranmebeljepara.com/peti-mati-duco/
http://ukiranmebeljepara.com/mebel-peti-mati-ukiran-dewa/

Mebel Jepara  •  October 27, 2014 19:55

good info gan..

Harga Hp Terbaru  •  November 13, 2014 04:57

Thank you for sharing
I've been looking for, and it can be an idea from here
I hope to be useful also for other people

write my paper  •  November 18, 2014 20:21

As most subjects are connected with your scholarly projects so beginning with your reading material can be a decent alternative. Once through with them you can search for relative points in the library. This will give you a preview of what individuals have chipped away at throughout the years in regards to your point.

daftar haga laptop terbaru  •  November 22, 2014 09:54

i follow this site and i learn in your post guoying liuJual Power Bank Murah Jogja

footprint :
news/article/12605/2744

Power Bank Yang Bagus
http://www.laptopbaru.com/2014/11/daftar-dan-harga-power-bank-yang-bagus.html
http://www.laptopbaru.com/2014/11/daftar-harga-powerbank-murah.html

Lirik Lagu  •  December 9, 2014 17:36

Thank you for sharing
I've been looking for, and it can be an idea from here
I hope to be useful also for other people

khasiat kulit manggis  •  December 10, 2014 09:59

cara mengobati darah tinggi
cara mengobati kolesterol
obat hepatitis b kronis
cara mengobati batu ginjal
obat benjolan di ketiak
cara mengobati miom
obat tradisional keputihan
obat tradisional kista
cara mengobati gagal ginjal
obat benjolan di payudara
obat tradisional kanker serviks
obat tradisional vertigo

Post your comment

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

back