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

Portal Medan  •  December 26, 2014 17:00

This is an excellent post I seen thanks to share it. It is really what I wanted to see hope in future you will continue for sharing such a excellent post.
http://www.caramakan.com | http://wahyublahe.com | http://merdekawalk.com | http://www.ceritamedan.com | http://www.22jerseybola.com | http://ceritamedan.blogdetik.com | http://inimedan.com | http://nasutionrizky.com | http://tamvanseo.blogspot.com | http://medanheritage.com | http://wahyublahe.blogspot.com | http://www.ceritamedan.com/2014/09/Pancake-Durian.html

http://goo.gl/SvFXl4 Social Media Buzzer | http://goo.gl/OgqOHo Cara Membuat Paspor Online | http://goo.gl/KGDkqN Manfaat Mandi Pagi | http://goo.gl/qYsBRi Cara Cek Nomor HP | http://goo.gl/l7uCgL Jasa SEO Medan | http://goo.gl/kFlME0 Cara Pakai Tongsis | http://goo.gl/O43aib Gaya Pacaran Anak Muda | http://goo.gl/1s6xwm Desain Kamar Tidur Anak Perempuan |

http://goo.gl/pAO4gM Cara Menurunkan Berat Badan | http://goo.gl/sfA5RT Foto Selfie | http://goo.gl/YVD20z Cara Menulis Cerita Fiksi | http://goo.gl/IMYXbC Manfaat Air Putih | http://goo.gl/kVbVxJ Parfum Pria | http://goo.gl/KGMUVR Kunci Jawaban Tebak Gambar | http://goo.gl/Dyh1zw Wisata Medan | http://goo.gl/wsViV0 Transportasi Medan | http://goo.gl/HuKSTI Pelaruga | http://goo.gl/uNLn51 Kuliner Medan | http://goo.gl/OKb0IJ Komunitas Medan | http://goo.gl/k1vK9X Berita Komunitas | http://goo.gl/98iCdo Oleh Oleh Khas Medan |
http://goo.gl/kWYmnK | http://goo.gl/ATnmhV Toko Roti di Medan | http://goo.gl/51UapI Cara Menjadi Barista | http://goo.gl/nurVHd Cara Menjadi Kaya | http://goo.gl/3LeXRA Cara Menjadi Model | http://goo.gl/4FQYi9 Cara Menjadi Ibu yang Baik | http://goo.gl/EqsY7i Tips Menjadi Penulis Hebat | http://goo.gl/3nJnZl Kopi Medan | http://goo.gl/4VQsNE Pulau Siba | http://goo.gl/Ey8A2h Daftar Film Bioskop Terbaru 2015 | http://goo.gl/MYEkbd Gaya Foto Prewedding

joart  •  January 2, 2015 09:31

furniture rotan | mebel rotan | kamar dipan ranjang rotan | design kursi roatn ruang kantor | desain lounger rotan sintetis | harga set kursi tamu rotan | model set kursi rotan daun pandan | set kursi rotan pelepah pisang | toko kursi rotan eceng gondok | set kursi taman rotan | kursi makan rotan outdoor | kursi makan apartemen murah | produsen kursi makan villa | harga kursi makan restoran | model kursi makan cafe | jual kursi makan hotel | rotan jepara | rotan sintetis | kursi rotan | kerajinan rotan | kursi rotan sintetis | furniture rotan minimalis | rattan furniture manufacture | furniture rotan sintetis | furniture rotan murah |

joart  •  January 2, 2015 09:32

bagus and beutiful

cantik  •  January 2, 2015 09:34

bagus dan cantik koleksi kainnya.

agen tiket pesawat  •  January 12, 2015 07:16

thanks for sharing this

usaha tiket pesawat  •  January 12, 2015 07:17

great share, thanks

bisnis tiket pesawat  •  January 12, 2015 07:17

i like this for sure this is great share

dongdong32  •  January 23, 2015 16:43

http://lululemon.suleymanaltun.com
http://toms.raleighdowntowner.co
http://www.marc--jacobs.com
http://concord11.sellittodaywithebay.com
http://raybanwayfarer.thedailysabs.com
http://www.ralph-laurenoutlet.com.co
http://www.canadagoosejackets.name
http://www.lebronjames-shoes.net
http://www.louisvuittonhandbags.net.co
http://oakleysunglassescheap.oakleywebsite.net
http://christianlouboutinoutlet.maximumguarantee.com
http://www.jordan11.name
http://raybansunglasses.thedailysabs.com
http://www.lebronjames-shoes.name
http://www.fitflop-shoes.us
http://www.louis--vuitton.us
http://www.insanityworkout.com.co
http://truereligion.onlineinc.net.co
http://www.ugg-boots.eu.com
http://www.supra-shoes.cc
http://www.michaelkorshandbags.eu.com
http://knockoffwatches.freebirdspublishing.com
http://raybans.thedailysabs.com
http://www.ugg-boots.com.co
http://canadagoosejackets.pensacolacandles.com
http://www.toryburch-outletonline.com.co
http://www.ugg-boots.in.net
http://christianlouboutin.maximumguarantee.com
http://www.prada-outlet.us
http://oakleysunglasses.oakleywebsite.net
http://www.timberlandboots.cc
http://www.retrojordans.name
http://www.abercrombiekids.name
http://www.tory-burchoutlet.in.net
http://www.cheap-jordans.us.com
http://www.christian-louboutinoutlet.com.co
http://www.coach-outlet.us.com
http://www.celine-outlet.us
http://burberryoutlet.newestsite.net
http://www.hollisterkids.net
http://todsoutletstore.kingmancommercialrealestate.com
http://www.abercrombieandfitch.net.co
http://cheapoakleys.oakleywebsite.net
http://rayban.letterpresskids.com
http://www.polo-ralphlauren.net.co
http://www.louisvuitton-lvoutlet.com
http://tomswedges.raleighdowntowner.co
http://www.oakleysunglassescheap.name
http://www.truereligion.eu.com
http://www.louisvuittonoutlet.net.co

www.scorespro.com  •  January 28, 2015 06:21

Basketball doesn't have to be purely rule controlled play with an indoor wood court. There are many various variations about the game which bring basketball to some whole brand new level. Variety is among the things which makes basketball this type of popular activity. www.scorespro.com

Mebel Jepara  •  January 28, 2015 09:09

thanks for sharing this

Mebel Jati Jepara  •  January 28, 2015 09:10

great share, thanks

Post your comment

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

back