Tabbed slideshow that works with and without JavaScript (jQuery)

Build an Auto-Scrolling Slideshow That Works With and Without JavaScript

May 12th in JavaScript & AJAX by Jenna Smith

Create a jQuery slideshow that enables you to click through each slide when JavaScript is disabled, without having to display all slides one under the other.

PG

Author: Jenna Smith

Jenna Smith is a front end web developer who has been busy coding XHTML and CSS for the last 6 years and jQuery for the past year. By day she works for a web based, project collaboration tool company as a UI Designer/Developer and by night she puts her feet up and tries to learn something new (when she isn't creating templates of course).

Introduction

Final Product

There are several tutorials that walk people through how to create a jQuery slideshow, but there aren't many that focus on making it function without JavaScript. This is because most people believe it isn't possible but I am going to explain an exceedingly simple method that shows it is indeed possible. You'll soon be kicking yourself and asking "How did I not think of that?"…

In this tutorial I will cover the following:

Step 1: Writing the markup

First things first, we need to write the markup that our slideshow will use. So let's jump straight in and code it up:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Tabbed jQuery slideshow</title>
        
        <link rel="stylesheet" href="css/slideshow.css" type="text/css" media="screen" />        
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    </head>
    <body>
        <div id="slideshow">
            <div class="slides">
                <ul>
                    <li>
                        <h2>Slide one</h2>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                            Donec pretium arcu non velit. Phasellus adipiscing auctor 
                            lorem. Curabitur in urna ut purus consequat sollicitudin. 
                            Phasellus ut diam. Cras magna libero, tempor id, venenatis 
                            sit amet, venenatis et, dui.
                        </p>
                    </li>
                    <li>
                        <h2>Slide two</h2>
                        <p>
                            Nam ac nibh sit amet augue ultricies sagittis. Donec sit 
                            amet nunc. Vivamus lacinia, nisi ac tincidunt commodo, purus 
                            nisi condimentum urna, sit amet molestie odio dolor non lectus. 
                            Cum sociis natoque penatibus et magnis dis parturient montes, 
                            nascetur ridiculus mus.
                        </p>
                    </li>   
                    <li>
                        <h2>Slide three</h2>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                            Suspendisse adipiscing dui a nibh. Integer tristique lorem 
                            vitae massa. Etiam dapibus, eros sit amet euismod semper, 
                            felis erat congue lacus, sed aliquam metus libero sed elit.
                        </p>
                    </li>                
                </ul>
            </div>
            <ul class="slides-nav">
                <li><a href="#">Slide one</a></li>
                <li><a href="#">Slide two</a></li>
                <li><a href="#">Slide three</a></li>
            </ul>
        </div>
    </body>
</html>

This isn't quite complete yet but as a general rule of thumb, we should always start with the bare minimum and enhance/add to it when necessary.

Step 2: Add some CSS

We're not going to be creating the most beautiful slideshow today as I just want to demonstrate the functionality more than anything. The following styles will set up our slideshow ready for action: 

/* ---------------------------------------------------- */
/* GLOBAL
/* ---------------------------------------------------- */
html {
font-size: 76%;}

body {
font-family: arial, helvetica, sans-serif;
line-height: 1.4em;
font-size: 1.2em;
padding: 5%;}

/* ---------------------------------------------------- */
/* SLIDESHOW
/* ---------------------------------------------------- */
#slideshow {
width: 960px;
background-color: #eee;
border: 1px solid #ddd;}

#slideshow ul {
margin: 0;
padding: 0;
list-style-type: none;
height: 1%; /* IE fix */}

#slideshow ul:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;}            

/* ---------------------------------------------------- */
/* SLIDESHOW > SLIDES
/* ---------------------------------------------------- */
#slideshow .slides {
overflow: hidden;
width: 960px;}

#slideshow .slides ul {
/* total width of all slides -
960px multiplied by 3 in this case */
width: 2880px;}

#slideshow .slides li {
width: 920px;
float: left;
padding: 20px;}

#slideshow .slides h2 {
margin-top: 0;}

/* ---------------------------------------------------- */
/* SLIDESHOW > NAVIGATION
/* ---------------------------------------------------- */
#slideshow .slides-nav {
background-color: #ddd;
border-top: 2px solid #ccc;}

#slideshow .slides-nav li {
float: left;}

#slideshow .slides-nav li a {
display: block;
padding: 15px 20px;
outline: none;}

Add these styles to a slideshow.css stylesheet in a CSS directory within the root. You should now see something similar to this:

tabs

Step 3: Making it function without JavaScript

Some of you are probably wondering how on earth this is going to work by now so I won't make you wait any longer.

All we need to do is give each of our slides an ID and reference that ID in the href attribute of the appropriate navigation item. It's that simple.

Your new markup should look as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Tabbed jQuery slideshow</title>
        
        <link rel="stylesheet" href="css/slideshow.css" type="text/css" media="screen" />        
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    </head>
    <body>
        <div id="slideshow">
            <div class="slides">
                <ul>
                    <li id="slide-one">
                        <h2>Slide one</h2>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                            Donec pretium arcu non velit. Phasellus adipiscing auctor 
                            lorem. Curabitur in urna ut purus consequat sollicitudin. 
                            Phasellus ut diam. Cras magna libero, tempor id, venenatis 
                            sit amet, venenatis et, dui.
                        </p>
                    </li>
                    <li id="slide-two">
                        <h2>Slide two</h2>
                        <p>
                            Nam ac nibh sit amet augue ultricies sagittis. Donec sit 
                            amet nunc. Vivamus lacinia, nisi ac tincidunt commodo, purus 
                            nisi condimentum urna, sit amet molestie odio dolor non lectus. 
                            Cum sociis natoque penatibus et magnis dis parturient montes, 
                            nascetur ridiculus mus.
                        </p>
                    </li>   
                    <li id="slide-three">
                        <h2>Slide three</h2>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                            Suspendisse adipiscing dui a nibh. Integer tristique lorem 
                            vitae massa. Etiam dapibus, eros sit amet euismod semper, 
                            felis erat congue lacus, sed aliquam metus libero sed elit.
                        </p>
                    </li>                
                </ul>
            </div>
            <ul class="slides-nav">
                <li><a href="#slide-one">Slide one</a></li>
                <li><a href="#slide-two">Slide two</a></li>
                <li><a href="#slide-three">Slide three</a></li>
            </ul>
        </div>
    </body>
</html>

Now test out your new code by clicking each tab… How cool is that?

This is by no means an undiscovered technique. People are already using it on sites you have probably used without realising, such as the Coda website.

Step 4: Adding Some Animation

Right well, that was fun! Now it's time to add some funky sliding animations to our slideshow.

You'll need to download the minified jQuery Cycle plugin that includes all transitions and save it as jquery.cycle.js within a 'js' directory in your project root. Then add the following to your <head> below the jquery library script tag. 

<script type="text/javascript" src="js/jquery.cycle.js"></script>
<script type="text/javascript" src="js/slideshow.js"></script>

We'll now create the slideshow.js file mentioned above and save it in the 'js' directory with the following code: 

$slideshow = {
    context: false,
    tabs: false,
    timeout: 1000,      // time before next slide appears (in ms)
    slideSpeed: 1000,   // time it takes to slide in each slide (in ms)
    tabSpeed: 300,      // time it takes to slide in each slide (in ms) when clicking through tabs
    fx: 'scrollLeft',   // the slide effect to use
    
    init: function() {
        // set the context to help speed up selectors/improve performance
        this.context = $('#slideshow');
        
        // set tabs to current hard coded navigation items
        this.tabs = $('ul.slides-nav li', this.context);
        
        // remove hard coded navigation items from DOM 
        // because they aren't hooked up to jQuery cycle
        this.tabs.remove();
        
        // prepare slideshow and jQuery cycle tabs
        this.prepareSlideshow();
    },
    
    prepareSlideshow: function() {
        // initialise the jquery cycle plugin -
        // for information on the options set below go to: 
        // http://malsup.com/jquery/cycle/options.html
        $("div.slides > ul", $slideshow.context).cycle({
            fx: $slideshow.fx,
            timeout: $slideshow.timeout,
            speed: $slideshow.slideSpeed,
            fastOnEvent: $slideshow.tabSpeed,
            pager: $("ul.slides-nav", $slideshow.context),
            pagerAnchorBuilder: $slideshow.prepareTabs,
            before: $slideshow.activateTab,
            pauseOnPagerHover: true,
            pause: true
        });            
    },
    
    prepareTabs: function(i, slide) {
        // return markup from hardcoded tabs for use as jQuery cycle tabs
        // (attaches necessary jQuery cycle events to tabs)
        return $slideshow.tabs.eq(i);
    },

    activateTab: function(currentSlide, nextSlide) {
        // get the active tab
        var activeTab = $('a[href="#' + nextSlide.id + '"]', $slideshow.context);
        
        // if there is an active tab
        if(activeTab.length) {
            // remove active styling from all other tabs
            $slideshow.tabs.removeClass('on');
            
            // add active styling to active button
            activeTab.parent().addClass('on');
        }            
    }            
};


$(function() {
    // initialise the slideshow when the DOM is ready
    $slideshow.init();
});

NOTE: To keep this tutorial short, I won't explain everything in this new javascript file but if you have any questions, feel free to ask in the comments below and I'll do my best help you out =)

Open your updated slideshow in a browser (ensuring there is no #slide-{num}) on the end of your URL) and wait… See it sliding?… Great! Now you can click the tabs and watch it slide a little quicker.

Step 5: Highlighting the active tab

So, we've got it working but what's this $slideshow.activateTab() method that we added? Well it isn't entirely necessary since the jQuery Cycle plugin already adds an .activeSlide class to the active navigation link for you, however, I like to give a little more control over my navigations so this method just adds an .on class to the parent <li> of the active link.

With this in place, you can add the following CSS to the end of our slideshow.css stylesheet to highlight the active tab: 

#slideshow .slides-nav li.on,
#slideshow .slides-nav li.on a {
background-color: #eee;}

#slideshow .slides-nav li.on a {
position: relative;
top: -4px;}

When you preview, you'll probably notice that the first tab isn't highlighted on page load…this is easy to fix…just use jQuery to add a .js class to the <body> tag as shown below: 

$(function() {
    // add a 'js' class to the body
    $('body').addClass('js');
    
    // initialise the slideshow when the DOM is ready
    $slideshow.init();
});

Then prepend the CSS we just added with the new .js class:

.js #slideshow .slides-nav li.on,
.js #slideshow .slides-nav li.on a {
background-color: #eee;}

.js #slideshow .slides-nav li.on a {
position: relative;
top: -4px;}

This means the highlighted buttons will only be styled if the user has javascript enabled and then we hard code the .on class for the first tab in the slideshow navigation: 

<ul class="slides-nav">
    <li class="on"><a href="#slide-one">Slide one</a></li>
    <li><a href="#slide-two">Slide two</a></li>
    <li><a href="#slide-three">Slide three</a></li>
</ul>

…and voila! Try disabling/enabling JavaScript and refreshing the slideshow to make sure everything still works and we're done!

Javascript Off
Final Product


Related Posts

Check out some more great tutorials and articles that you might like

Enjoy this Post?

Your vote will help us grow this site and provide even more awesomeness

Plus Members

Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.

Join Now

User Comments

( ADD YOURS )
  1. PG

    BroOf May 12th

    hey nice tutorial! Btw it’s the first female autohr i’ve seen here. Great!

    ( Reply )
    1. PG

      Jeffrey Way May 12th

      I didn’t even think about that. How fun for Jenna.

      ( Reply )
      1. PG

        lawrence77 May 12th

        Jeff your new site theme was amazing man…..
        Cool designer too and also a coder…. ;)

    2. PG

      Stephanie May 12th

      This is the first female author I have seen here too. I am very happy about that! Guys aren’t the only ones making web sites, ya know!

      ( Reply )
      1. PG

        Simona May 14th

        Very happy too so she the female power rising :) , great tutorial, thanks for sharing.

    3. PG

      Guest May 16th

      I read this tut because of its a female tuts hahaha

      ( Reply )
      1. PG

        Ara May 24th

        Me too, hahaha…
        Nice works lady :)

  2. PG

    Isaac Seymour May 12th

    I’ve seen something like this elsewhere, for emulating the Coda page specifically, but this is so much simpler, and much better explained – just what I would expect from Tuts+ – I might actually be able to implement it now…

    ( Reply )
  3. PG

    Dave May 12th

    Great Tutorial!! But what kind of people would have Java Disabled ha ha ;)

    ( Reply )
    1. PG

      wpheroes May 12th

      true!!

      ( Reply )
  4. PG

    Raul Riera May 12th

    Nice, its not working that well on Safari 4 though… the “box” is jammed to the right

    ( Reply )
    1. PG

      Jenna May 12th

      Hmm, it’s working fine for me. Did you make sure there is no ‘#slide-{num}’ at the end of your URL when you disabled JS and refreshed?

      ( Reply )
      1. PG

        Cyrus Kafai Wu May 13th

        Doesn’t work in IE6 it just displays them all on the right side on one line.

      2. PG

        Jenna May 13th

        It works perfectly in my IE6 (on Windows)… strange. Perhaps paste the exact URL you are accessing with these problems and I will try to debug it.

  5. PG

    Brian Klepper May 12th

    No problems in Safari 4 for me!

    ( Reply )
  6. PG

    Greg May 12th

    What a great tutorial. I will be using this one for sure!
    - Greg

    ( Reply )
  7. PG

    Jack Earl May 12th

    Thanks for the breakdown of whats going on. I spent an hour last night trying a similar tutorial with no luck. But this looks like something I can follow along with and understand.

    ( Reply )
  8. PG

    crysfel May 12th

    woawww…. i really like the non-javascript technique.

    thank you so much Jenna

    ( Reply )
  9. PG

    Thomas May 12th

    Just what I’ve been looking for. Great article Jenna!

    ( Reply )
  10. PG

    Snorri - Css May 12th

    nice 1

    ( Reply )
  11. PG

    Myfacefriends May 12th

    Thanks Jenna your the best! cheers!

    ( Reply )
  12. PG

    Bbykcakkr May 12th

    Awesome tutorial just what im looking for!

    you’re really cute :)

    ( Reply )
  13. PG

    Fynn May 12th

    Wow… I just needed something like this in a project I’m working on!

    Great! And by the way nice to so see a female author :)

    ( Reply )
  14. PG

    Adam Wiggall May 12th

    Hmmm, like Raul Riera it doesn’t work for me in Safari 4, otherwise a great tut, thanks.

    ( Reply )
  15. PG

    Joe May 12th

    Cool girl

    ( Reply )
  16. PG

    Noma May 12th

    Very nice tutorial! Thanks for sharing.

    ( Reply )
  17. PG

    Philo May 12th

    Great Article! :)

    ( Reply )
  18. PG

    lawrence77 May 12th

    The first female author rocks…. ;)

    ( Reply )
  19. PG

    Felix May 12th

    Cool tut, but the no-JS technique doesn’t work in Opera 9.5 either :/

    ( Reply )
  20. PG

    Goldeneye May 12th

    thank you for the nice tut!!!
    its great.

    ( Reply )
  21. PG

    James May 12th

    Nice tutorial and kudos on making it work (mostly) without JS but, as mentioned, the non-JS fallback doesn’t work in Opera.

    ( Reply )
    1. PG

      Jenna May 12th

      Uh oh… I have to confess to not testing it in Opera (bad Jenna!) =P

      Strange that it wouldn’t work though. I mean, it works perfectly in IE6!

      If I manage to figure out a nice way to fix it in Opera then I’ll be sure to let you know. It’s currently tested and working in IE6, IE7, Firefox, Safari and Chrome.

      ( Reply )
      1. PG

        Thomas Milburn May 12th

        You can make this work in all modern browsers using CSS alone by using the hover and active pseudo-classes. This site has a huge list of examples http://www.cssplay.co.uk/menu/

  22. PG

    mokin May 12th

    Cool girl and tutorial !
    Thank for tutorial function without JavaScript.

    I want You tut.
    look like
    http://www.lanrentuku.com/lanren/jscode/js-0192/
    with jQuery.

    Thank again.

    ( Reply )
  23. PG

    brian May 12th

    cool tut, but doesnt work all too well with javascript disabled in ff 3.0.10 :(

    ( Reply )
    1. PG

      SiGa May 12th

      … got the same browser and didn´t recognize any problems… just don´t forget to refresh after disabling JS, as she mentioned…

      ( Reply )
    2. PG

      jem May 12th

      works fine for me

      ( Reply )
  24. PG

    SiGa May 12th

    Very useful, thanks for explaining that, Jenna!

    ( Reply )
  25. PG

    wpheroes May 12th

    Great techniques, thanks.

    ( Reply )
  26. PG

    Dario Gutierrez May 12th

    Great tut, I want to use it in my site. Thanks for sharing.

    ( Reply )
  27. PG

    Thomas May 12th

    Is there an easy way to make a previous/next buttons instead of a tabs?

    ( Reply )
    1. PG

      Elli August 5th

      I’m also wondering this. (:

      ( Reply )
      1. PG

        Elli August 8th

        Oh, I figured it out this way:
        1) In the slideshow.js file, find “pause: true” and replace it with this:
        pause: true,
        next: (”#next2″),
        prev: (”#prev2″)

        No comma on the last line, otherwise it won’t work.

        2) Create a three-column table. In the first column, add this:
        Prev

        In the second/middle column, have and so on.

        In the third column, add this:
        Next

        And that should work. Did for me anyway.

        http://www.twicebakedfx.com/v34

        ^ View Page Source

      2. PG

        Elli August 8th

        Oopsie:

        <a id="prev2" href="#"> Prev </a>

        <a id="next2" href="#"> Next </a>

      3. PG

        Mana October 28th

        It’s working perfectly! Thanks Elli! :)

  28. PG

    FireDart May 12th

    I spend 3 day’s looking for an auto scrolling content slider and here it is the next day! Wow…… Great tutorial btw, great job!

    -FireDart

    ( Reply )
  29. PG

    Jarod May 12th

    Good stuff. Nice, clean, and effective.

    :)

    ( Reply )
  30. PG

    Matt May 12th

    Very nice!!! using it already… with a little twist! How about the same for the Mootools framework?

    ( Reply )
  31. PG

    John May 12th

    Sweet! I was actually just having some problems with this while designing as new layout. Thanks much.

    ( Reply )
  32. PG

    Lau May 12th

    This is pretty nice stuff… Im gonna see if i can use it on one of my sites :)
    Thank you

    ( Reply )
  33. PG

    Gabriel Amorim May 12th

    :O

    OMG please don’t stop this cool work! Make us happy with more! :D

    My congratz, thank you.

    ( Reply )
  34. PG

    Idowebdesign May 12th

    Thanks Jenna ! Really nice and useful article !

    ( Reply )
  35. PG

    mrjacob May 12th

    Hott stuff, Realy nice…

    I wonder how you get a slide box like that…
    or some else jquery plugin on a skew position?
    like 30o Degrees..or something.

    Is it out there?
    someone?

    Thanks

    ( Reply )
  36. PG

    J May 12th

    Good to see a girl out here. Nice tutorial.

    ( Reply )
  37. PG

    Evan May 12th

    Fantastic article. Working on something like this as we speak :D

    ( Reply )
  38. PG

    Carl - Web Courses Bangkok May 12th

    Really nice ! I am going to use this for a hosting web site we have been asked to design for.

    Also really nice to see graceful depredation :) How graceful you are Jenna.

    ( Reply )
  39. PG

    Diego SA May 12th

    Loved this stuff! Is it possible to insert images with text? It’d be perfect in a home website. Thanks a lot!

    ( Reply )
  40. PG

    Christian Beikov May 12th

    Thanks, really nice tutorial!

    ( Reply )
  41. PG

    Mysticpixels May 12th

    Awesome usage of CSS and JS. Great Graceful Degradation Implemenation technique used. Looking forward for more such inspiring articles. Nettuts just rocks !

    Btw, you saved a day of mine …. this was exactly what i was luking for, for the last week … thanks netttus and a ton to Jenna Smith

    ( Reply )
  42. PG

    Guillaume May 13th

    Great stuff ! Rare to see a girl posting these kind of tips

    ( Reply )
  43. PG

    Vince May 13th

    Great tut. Using a similar solution for a project I am building now. I am using the jQuery Cycle though.

    ( Reply )
  44. PG

    imsraaia May 13th

    cool….

    ( Reply )
  45. PG

    Raymond Selda May 13th

    This is really nice. I like the overall feel. I also wrote an article similar to this one. Thank you

    ( Reply )
  46. PG

    xzibbit May 13th

    this is very nice, thanks for your support

    ( Reply )
  47. PG

    ThaClown May 13th

    Thanks alot! Really nice

    ( Reply )
  48. PG

    gfx May 13th

    without javascript? jQuery is a javascript library!!!

    ( Reply )
    1. PG

      JJenZz May 13th

      It is indeed =)

      without javascript means, with javascript disabled. Try disabling javascript in your browser and click the tabs… you will see it still ‘functions’

      Sorry for the confusion.

      ( Reply )
  49. PG

    saurabh shah May 13th

    nice work jenna… its cool as u :) .. thnx for sharing

    ( Reply )
  50. PG

    Martyn Web May 13th

    Nice work,

    I’ve seen some examples of this before but not so simple, can’t quite remember where so I’ll guess Its another bookmark for me.

    ( Reply )
  51. PG

    riko May 13th

    Excellent ….. 10/10

    ( Reply )
  52. PG

    Oliver May 13th

    Perfect. Exactly what I’ve been searching for for weeks now. Thank you.

    How do I stop it from auto scrolling though, I would just like the links to initiate the effect?

    Thanks again.

    ( Reply )
    1. PG

      Oliver May 13th

      Figured it out if anyone else wanted to know. Very simple. I kicked myself…

      just change the timeout to 0 on the slideshow.js

      Once again thank you for this invaluable tutorial.

      ( Reply )
      1. PG

        JJenZz May 13th

        In case anyone has any more similar questions to this, the jQuery cycle Option Reference page explains what options are available and what they do:

        http://malsup.com/jquery/cycle/options.html

  53. PG

    paul May 13th

    It would of been nice if the css was explained exactly what is happening in the background at to why it isnt showing and then why it is?

    Perhaps you could explain it to me over dinner?

    come on cant blame me for trying

    good tut though keep it up!

    ( Reply )
  54. PG

    Mike May 13th

    Excellent job smarty pants!

    ( Reply )
  55. PG

    Shawn May 13th

    Just spent some time experimenting with this tut in expression engine, and it works perfectly even with Javascript turned off! This would be a great solution for a front page image rotator for featured content.

    Nice Job!

    ( Reply )
  56. PG

    GeemeeTheway May 13th

    Great! Thank you so much !!!!

    ( Reply )
  57. PG

    v-render May 14th

    great work .. thanks for the share and exact tutorial

    ( Reply )
  58. PG

    Jamie May 14th

    Love it but in IE6 if you don’t have the JQuery stuff linked in then it doesnt work.

    For example http://www.broadlandhousing.org/dev/scroll/ – this is just pure XHTML and CSS works fine in Firefox, IE7, IE8 however in IE6 it doesnt work it bunches the boxes together

    ( Reply )
    1. PG

      Jenna May 14th

      Oh no! So it does… it seems I missed a line of CSS when I was typing up the tutorial.

      Just add ‘width: 960px;’ to the ‘#slideshow .slides {’ selector below the ‘overflow: hidden;’ property and it’ll work fine.

      I have contacted Envato to get this fix added to the tutorial above.

      Thank you for letting me know =)

      ( Reply )
  59. PG

    B May 15th

    I’m not worthy. Thanks!

    ( Reply )
  60. PG

    takingweb May 15th

    fantastic!!!!….I spent 3 days looking for a scrolling compatible with another js i use and at least here it is!!!!!!!

    thanks a lot!!!!

    ( Reply )
  61. PG

    Mike May 15th

    Nice work, Jenna

    ( Reply )
  62. PG

    Brandon May 15th

    Jenna,

    Great tutorial, it has been very helpful. One question, I’ve tried using the “easing” effect but I am not sure how I need to implement it into “slideshow.js”. I’m trying to do the “scrollRight (click)” effect on the http://malsup.com/jquery/cycle/ homepage.

    Any suggestions?

    ( Reply )
  63. PG

    John Sanders May 15th

    Great tutorial Jenna, thanks.

    ( Reply )
  64. PG

    b00m May 17th

    Great!
    Thanks a lot for Jenna!

    ( Reply )
  65. PG

    Bruno May 17th

    Great job Jenna,

    How do the same slideshow with a vertical tab ?

    ( Reply )
  66. PG

    Guest May 17th

    I can’t believe that so many people still doesn’t know this, or you’re just making a fool of yourself because the author is a girl and your online with a different world. I’m not gay though look at my comment above.
    “I read this tut because of its a female tuts hahaha” but after really reading

    through the tuts, it’s just an overflow:hidden on the parent container with a lot of long child container width and adding an anchor to those ids. You guys out there (or kids I guest) can’t believe it you’re just making fool of your self.

    I’m saying those say thanks and all that but who really doesn’t know well good for you.

    ( Reply )
    1. PG

      Steven May 20th

      I’m so impressed that you already knew this so go ahead and give yourself a pat on the back. I’m pretty sure that at one point you probably didn’t know this either. Do you think that every web developer in the world started learning at the same time like it’s some kind of race? I suppose you’ll win this race because you already know everything or you’re just a little ahead of us all. Maybe you just got dumped by your first girlfriend last week in gym class and you’re still upset about it. Is that it? Please, go waste white-space somewhere else next time you have a personal problem. But before you do, I suggest you start paying more attention and study harder in English class.

      Now I would like to say thanks to the author of this excellent tutorial. It has bee of great use to me. Please, keep making more!

      ( Reply )
  67. PG

    Eric Santana May 18th

    Great tutorial. I needed something quick for a client to show some slide show functionality for a design concept. I look forward to reading more of your tutorials, Jenna.

    ( Reply )
  68. PG

    John May 22nd

    Awesome tutorial, how would you add a “Pause/Resume” function?

    I’ve been trying the code below but it doesn’t work :(

    $(’#pauseButton’).click(function() {
    $slideshow.cycle(’pause’);
    });

    $(’#resumeButton’).click(function() {
    $slideshow.cycle(’resume’, true);
    });

    Any ideas? thanks!

    ( Reply )
    1. PG

      JJenZz May 25th

      Hi John,

      I have added the changes you need to pastie.org (plus some small refactoring to make life easier)

      http://pastie.org/private/ektoekkwekv3n31flbfc7q

      Let me know if you need help understanding any of the code

      ( Reply )
      1. PG

        Brian May 25th

        How about a way of stopping the slideshow once one of the buttons has been clicked? Without adding a play/pause button?

  69. PG

    Sam May 26th

    The Jquery Cycle Plugin is wreaking havoc with transparent png backgrounds in ie7. I’ve been googling all day but to no avail. Does anyone have a suggestion for this?

    p.s
    Maybe something to do with cleartype?

    Thanks In advance.

    ( Reply )
  70. PG

    Christopher Hein May 26th

    Love this tutorial, is there anyway to detect which tab is being click by the user in order to cause the fx direction to change, such as if the user is on slide 3 and clicks slide 2 it would “scrollRight” instead of “scrollLeft”.

    I’ve been playing with the functionality but I can’t seem to figure out how that would work.

    Suggestions?

    ( Reply )
    1. PG

      Jenna June 7th

      You can try adding multiple comma separated effects to the ‘fx’ option to acheive this:

      http://malsup.com/jquery/cycle/multi.html

      ( Reply )
  71. PG

    Kennedy May 26th

    What would i need to change in jquery.cycle.js to display more than one slide?

    ( Reply )
    1. PG

      Jenna June 15th

      tbh, I’m not entirely sure… I am trying to figure this one out myself for a project I am working on so I will let you know if I solve it =)

      ( Reply )
  72. PG

    Graphic and Web Designer May 26th

    Extremely useful. Definitely going to try it out.

    ( Reply )
  73. PG

    Kiran Patel May 28th

    Dear Jenna,

    Thank you for the wonderful tutorial and its been great to learn as i;m complete begginer; i got one question though in IE it does not pause like it does in Firefox etc. so can you tell me how i can fix that?

    Regards,
    Kiran

    ( Reply )
    1. PG

      Kiran Patel May 28th

      The problem was solved so ignore my question. The tutorial was great though!

      ( Reply )
  74. PG

    DD May 28th

    Great stuff. Unfortunately, your code is not compatible with jquery.ui found at http://jqueryui.com/

    I’m attempting to replace jquery.ui’s tabs function with your code, but your code kills other jquery.ui functions already in place.

    ( Reply )
    1. PG

      shashank October 12th

      u need to check the document.ready() function

      ( Reply )
  75. PG

    Seo Specialists June 2nd

    Nice Posting. Thanks :)

    ( Reply )
  76. PG

    Dave June 6th

    Opera 10 isn’t liking the javascript. The page loaded the nav but nothing else. This could also be something I’ve done though since I had to alter the html to use divs instead of ul and li.

    ( Reply )
    1. PG

      Dave June 6th

      Ah, my problem was something I caused by trying to fix the no javascript in Opera issue.

      ( Reply )
  77. PG

    Dave P June 7th

    Great tutorial, very useful!

    I’ve been looking for a way to add a link from within slide-one to say slide-four but not having much luck…

    Any suggestions appreciated!!

    ( Reply )
    1. PG

      Dave P June 7th

      Okay, so worked out a solution…

      Within slide-one add your link with id=”direct” and href=”#”

      In slideshow.js, add the additional lines at the end of prepareSlideshow:

      prepareSlideshow: function() {
      $(”div.slides > ul”, $slideshow.context).cycle({
      fx: $slideshow.fx,
      timeout: $slideshow.timeout,
      speed: $slideshow.slideSpeed,
      fastOnEvent: $slideshow.tabSpeed,
      pager: $(”ul.slides-nav”, $slideshow.context),
      pagerAnchorBuilder: $slideshow.prepareTabs,
      before: $slideshow.activateTab,
      pauseOnPagerHover: true,
      pause: true
      });

      // direct link to slide-two
      $(’#direct’).click(function() {
      $slideshow.tabs.eq(1).trigger(’click’);
      return false;
      });
      }

      When you specify $slideshow.tabs.eq(1) you are tell the browser to jump to slide-two, since the first slide is eq(0). You can obviously change this to eq(2) for slide-three, etc.

      ( Reply )
  78. PG

    Dice June 8th

    For previous and next buttons you got to add two things, in the slideshow.js add in:

    next: ‘#next2′, // moves forward to next slide
    prev: ‘#prev2′ // moves backward to previous slide

    This goes right under ” pause: true,” around line 32.

    Then in the html:

    Prev Next

    ( Reply )
  79. PG

    Eric June 8th

    Thanks for the tutorial, very useful.

    One question – if I want to place my anchor links (the ones in slides-nav) inside a , it starts to break. I assume there’s somewhere in the JavaScript that needs to be changed to locate the anchors. Any help?

    ( Reply )
    1. PG

      Eric June 8th

      Sorry, my HTML tag got stripped. My question was, if I want to place the anchor tags inside a Paragraph tag, what do I need to update in the JS? Thanks!

      ( Reply )
  80. PG

    Dice June 10th

    Just came across an issue with javascript turned off while using a large number of slides. The slides are positioned under each other and are partially visible.

    to resolve the issue just add the following to your css:

    #slideshow .slides {
    height: *how ever many pixels your slides are*
    }

    then:

    .js #slideshow .slides {
    height:auto;
    }

    ( Reply )
  81. PG

    maDnes June 14th

    I just stumbled over a bug with this method.

    I am applying a background image to the #slideshow div through css:
    background: url(background.png) top center no-repeat;

    While firefox is showing my background fine through the text in the slides, in IE7 it seems to be forcing a solid color background on each of the items.

    After some more research I found that with javascript disabled I can see the background fine in IE too, so this leads me to believe that the issue resides in the javascript file somewhere. Is this script forcing some background property in IE?

    Here is an image of the problem in question:
    http://xpand2.no/slideshow_bug.png

    I really could use some help here, as I am out of ideas of what to do next.
    I quickfix was to apply the background image to each item, but that will cause the background to scroll with the slides, and I do not want that to happen.

    Any help is much appreciated!

    ( Reply )
    1. PG

      Blaine June 21st

      The Cycle plugin provides a fix for this. Just add the following option:

      cleartypeNoBg: true

      The following link provides an in depth explanation.
      http://www.mail-archive.com/jquery-en@googlegroups.com/msg71747.html

      ( Reply )
      1. PG

        David July 24th

        This is really nice, but I’m having the same problem as maDnes with the forced bg color in IE, I had a look at the link that Blaine provided, but I don’t know where to put the code.

        I tried a few places but no luck, if someone could tell me where to put this fix it would be greatly appreciated!

        Thanks

      2. PG

        David July 24th

        Worked it out, and if anyone knows as little as me when it comes to js, just put the

        cleartypeNoBg: true

        in the

        $(’div.slides > ul’, $slideshow.context).cycle({

        field in the slideshow.js file.
        not sure if theres a better place for it, but it works :)

  82. PG

    Laura Volpe June 16th

    Hi Great Tutorial!
    I have a question… how can i stop the auto-scrolling???

    ( Reply )
    1. PG

      Jenna June 28th

      Just change the timeout to 0 to stop the auto-scrolling =)

      ( Reply )
  83. PG

    miaJ June 18th

    Thank you so much. I was looking for this.
    I’m using it to change images. How do I change the transitioning? I want the images to come on top of one instead of sliding to the left

    ( Reply )
    1. PG

      Josh Clark June 18th

      Just change the “fx” on line 7 of slideshow.js from ’scrollLeft’ to ‘fade’

      ( Reply )
      1. PG

        miaJ June 19th

        Thank you so much!

  84. PG

    Josh Clark June 18th

    Jenna-

    Thanks for a great tutorial and an awesome solution to a problem that’s been vexing me for awhile. I have clients who ask for this functionality all the time, and your solution solves a couple delivery issues I’ve come across.

    1. The use of the cycle plugin allows different transition types, including fade for clients who don’t want a scroll.

    2. The ability to set a timed interval for auto-transition is really helpful.

    3. It gracefully degrades! Someone above asked who doesn’t have JavaScript enabled, but I’m beginning to think the 5% who do turn off JS are all my clients these days! :0)

    Again, Jenna: Bravo…you’ve helped me out tremendously!

    ( Reply )
  85. PG

    Alex June 19th

    Thanks for this great tuto…

    timeout: 0 if you want to disable the auto animation…

    ( Reply )
  86. PG

    Boris June 21st

    Thanks, it’s awesome!

    ( Reply )
  87. PG

    Nathan June 23rd

    Hi Jenna!

    Great Tut, love it!

    But in IE7 I seem to get a scroll bar on my containing element that will scroll everything a quarter of an inch but the slide tabs. Any suggestions?

    ( Reply )
  88. PG

    Paw June 26th

    Thanks for sharing this article! Great stuf!

    ( Reply )
  89. PG

    winter bugahod July 9th

    tnx for your sharing god bless

    ( Reply )
  90. PG

    Henrik Bondtofte July 23rd

    Thank you so much for sharing.

    ( Reply )
  91. PG

    jeff July 29th

    Wow… that was ridiculously easy. I remember being scared off from looking at the source code from something like smoothgallery (I’m a designer, btw). Jquery seriously just makes life easier, it’s not even funny.

    Thanks for sharing.

    ( Reply )
  92. PG

    Elli August 8th

    Is there any way to resolve the cleartype issues in IE? I have
    cleartype: !$.support.opacity,
    cleartypeNoBg: true,
    In the slideshow.js file under fx: ’scrollLeft’, but it’s not working. =\

    ( Reply )
    1. PG

      Elli August 8th

      Nevermind. Fix:
      (slideshow.js)
      fx: ’scrollLeft’,
      cleartype: !$.support.opacity,
      cleartypeNoBg: false,

      (CSS)
      #slideshow .slides li {
      background: transparent !important;
      width: 920px;
      float: left;
      padding: 20px;}

      ( Reply )
  93. PG

    Adam August 13th

    Hi, great tut! I’m trying to make the slide effect happend not when I click the nav link but when I hover it?

    ( Reply )
    1. PG

      Dragon August 18th

      Me too.

      Also, are we limited to what can semantically be put into an li?

      ( Reply )
  94. PG

    Daniel August 22nd

    Hi, i have a problem.. i can’t set the height:auto option in the script slideshow.js ( http://malsup.com/jquery/cycle/options.html ).

    for example If i set Height:’300px’ it works but when i set Height:’auto’ the script adds in the inline style the height of the bigger content.

    could you help me please ?

    ( Reply )
  95. PG

    Gloria August 26th

    This is exactly what I’ve been looking for!!!
    Thank you!

    I’m having one slight problem though. I put images instead of text in, and I can only see the very top of it — I’m not sure what setting needs to be changed…can you help.

    Thanks!

    ( Reply )
  96. PG

    Radu September 4th

    Couldn’t you make the tabs appear “selected” without javascript by using :active?

    ( Reply )
  97. PG

    Ernie September 7th

    Hi this is a great script. How can set up multiple instances of this system on a page?

    ( Reply )
  98. PG

    Jen Wilson September 12th

    iv’e been trying to make this fit into a variable width layout. i tried putting the widths to % and auto- but it doesn’t degrade welll when the javascript is turned off. so, i tried constraining the height- and putting overflow to hidden. any suggestions?

    #slideshow {
    width: 100%;
    background-color: #eee;
    border: 1px solid #ddd;
    height:200px;
    }
    #slideshow .slides {
    overflow: hidden;
    width: 100%;}

    #slideshow .slides ul {
    width: 100%;}

    #slideshow .slides li {
    width: 90%;
    float: left;
    padding: 20px;
    height:200px;
    overflow:hidden;
    }

    ( Reply )
  99. PG

    Alex September 21st

    Can I call one of the slides from another page using an anchor? I’ve tried but no luck….

    ( Reply )
  100. PG

    Karthick.R.S September 22nd

    Hi jenna

    Very useful tutorial for web developers.

    But is it possible to create fade in and fade out effect when scrolling right to left?

    Help me to greatly appreciated. Im not familiar with js

    ( Reply )
  101. PG

    SØGEMASKINEOPTIMERING September 24th

    Im gonna use this…

    ( Reply )
  102. PG

    Jason September 30th

    For a partial fix to make the scrolling function in Opera without JavaScript, add this Opera filter to your CSS:
    @media all and (-webkit-min-device-pixel-ratio:10000),
    not all and (-webkit-min-device-pixel-ratio:0) {
    #slideshow .slides {overflow-x:scroll;}
    }

    This will allow Opera users to still access the slides without JavaScript. Unfortunately, it adds an ugly scrollbar, but depending on your design, this could be hidden by layering an element over the scrollbar.

    ( Reply )
  103. PG

    Joe October 11th

    I love the smooth transitions.

    ( Reply )
  104. PG

    Marcel October 24th

    FYI, to make my navigation show up, I had to copy and paste the non-minified version of Cycle from the demo page: http://nettuts.s3.amazonaws.com/325_tabbed/demo/js/jquery.cycle.js

    Might want to clarify this under Step 4?

    ( Reply )
  105. PG

    Petsen October 26th

    hm… seems like it doesn’t like PHP files… the source files work just fine on FF3.5 but the same content inside a PHP file doesn’t.. weird.

    P.S.
    Very nice tutorial!

    ( Reply )
    1. PG

      Petsen November 10th

      nvm… a simple typo can ruin your day… :)

      ( Reply )
  106. PG

    gp sidhu November 4th

    hi mam thanks for this wonderful tututorial
    now what i am trying to do is integrating this in another web page but when i test on the local server it works fine but does not work when uploaded to the server
    please help!!!

    ( Reply )
  107. PG

    David Moreen November 12th

    Jenna, thank you for this great tutorial. One thing that every designer needs to bare in mind while making a project with javascript is that everyone will not have javascript turned on, so the site still needs to function well. Something similar to this will be included in every website that I construct from now on.

    ( Reply )
  108. PG

    Joe November 17th

    First off, thanks so much for supplying the info and code for this application! Quick question, how customizable is it? Would it be possible to switch the orientation of the layout so it displayed vertically?

    Basically, what I would like to do with it is have the links on the right side and have the information display to the left of the links. Similar to the main news section here: http://ca.msn.com/ at the top left under the nav bar, but have the links on the right and the info on the left.

    Would it just require some tweaks to the css or is this not possible?

    ( Reply )

Add Your Comment

( GET A GRAVATAR )
  1. Arrow
    Gravatar

    Your Name
    November 17th