Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m Advertisement # Build an Auto-Scrolling Slideshow That Works With and Without JavaScript Difficulty:IntermediateLength:MediumLanguages: 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. ## Introduction 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: 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: Add these styles to a slideshow.css stylesheet in a CSS directory within the root. You should now see something similar to this: ## 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: 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. We'll now create the slideshow.js file mentioned above and save it in the 'js' directory with the following code: 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
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>

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

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:

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

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