Add a Slide Show to Your Website: The jQuery Way

Having a photo slide show on website landing pages is one of the most popular trends in web design now.  And for good reason:  It gives the site life and automatically refreshes the look every few seconds, while conveying more information without requiring the user to click anything.

There are several ways to implement a website slide show on your site.  If you’re using a content management system like WordPress or Drupal, there are plug-ins that do it.  But what if you have a site made from plain old HTML and CSS?  I will describe two ways to do it.

The jQuery Way

The first method I’ll describe uses a jQuery plug-in called “Cycle”.  You don’t really need to understand what this means, other than to say that you’ll be pasting some code into your HTML and CSS files.

UPDATE:  I now recommend a jQuery plugin called Flexslider.  It works very similarly to how Cycle works but is mobile-friendly.  I’m planning to update this article, but in the mean time, check out Flexslider. – Brian 1/16/2014.

The advantages of this way of doing the slide show are that all of the files reside on your server, and you have lots of flexibility on how to make the slide show look.

You’ll have to start by including two files in the <head> section of your page:  the jQuery file and the Cycle plug-in file.

You can either download jQuery here, or simply reference a file that is hosted by Google.  Check your website code because your site might already be using jQuery, especially if it has pulldown menus or other special effects like that.  If so, just make sure you update to the latest version of jQuery, because if you don’t it WILL cause bugs (I know – it happened to me).

If you download jQuery, put the file in a directory called “scripts” on your server.  It doesn’t matter if you use the “minified” version or the “uncompressed” version.  Both work.  The minified is smaller, but the uncompressed is more readable if you are interested in seeing how it works. Next, reference the file in the <head> section of your page as follows:

<!-- jQuery -->
<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>

If you prefer to use Google’s version, you don’t have to download anything.  Just add this line of code to the <head> section of your page:

<!-- jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Ether way will work, but just pick one.  The Google way is fewer steps to implement, but requires loading code from an offisite server.  Not a big deal since Google is pretty reliable.

Next, you’ll have to similarly load the jQuery Cycle plug-in code.  But before you do, go to the Cycle site here, and play with the demos to see what is possible.  When you are ready, go to the download link and save the file to the scripts folder of your server.  Unless you are really strapped for  hard drive space, get the full version.  Then add this code to the <head> part of your HTML file:

<!-- Cycle - "slideshow" plug-in -->
<script type="text/javascript" src="scripts/jquery.cycle.all.js"></script>

OK, now it’s time to upload the photos for the slide show to your server.  Usually you’ll want all of these photos to be the same size (dimensions).  In this example, all of them are 600 pixels by 200 pixels, and I’ve put the photos in a directory called images/cycle/. After the files are loaded, create a <div> where you want the files to show up in your HTML code.  In this example, it is called “slideshow”.  Here is the code:

<div class="slideshow">
<img src="images/cycle/skyline.jpg" width="600" height="200"  alt="skyline"/>
<img src="images/cycle/people.jpg" width="600" height="200"  alt="people" />
<img src="images/cycle/products.jpg" width="600" height="200" alt="products" />
</div> <!-- images -->

If you look at your website now in a browser, you should see all three photos stacked (or in a row) on your site.  If so, that is good.  If not, check your paths.

Next we need to add the Javascript code to actually run the slide show.  Paste this below the previous code in your HTML file.  Here it is:

<!-- Run the slide show! -->
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
timeout:7000,
speed:2000,
fx:'fade'
});
});
</script>

You’ll notice a few parameters in this code.  “timeout” specifies how long each photos is shown.  “speed” specified speed of the fade, and “fx” specifies the type of transition.  For more info on these and more parameters, check the jQuery site.

If you view your web page in a browser, the slide show should begin!


Here are a couple things to watch out for.  If you go overboard with the picture sizes or the number of pictures, the slide show can take a long time to load, leaving your visitor staring at a blank area for a long time.  Make the photos reasonably sized, say 100KB each as opposed to 2MB!  If you want to put more than say 10-12 photos in the show, I’d recommend the second way, the “Google way” described in my next article.

One cool thing that I discovered is that each “slide” doesn’t necessarily have to be a photo!  The Cycle add in will put whatever HTML containers you put in the slide show <div> as part of the slide show.  So, you can have a “slide” with HTML text as one of the slides in the show.

Finally, you might notice that sometimes you see a flash of all of the photos of the slide show for a second before the Javascript loads and hides them.  You can get around this by adding the display: none; to the images in the slide show as follows:

.slideshow img {
width: 600px;
height: 200px;
display: none;    /* hide all images at first */
}

With this, instead of seeing all of the photos, the area will just be blank until the Javascript loads.  That’s better than the chaos of all of the photos, but we can do better.  If you add an additional CSS declaration, you can make the first photo  display even before the Javascript loads.

.slideshow img:first-child {
display: block;
}

For an example of this in action, check out my website for Providence Presbyterian Church or my site, brianshim.com.

Let me know how it goes!  In my next article, I’ll describe how to create a slide show on your website using a Google plug-in and Picasa.

– Brian

14 thoughts on “Add a Slide Show to Your Website: The jQuery Way

  1. Hello Guys,, that’s all look very nice, but I still can not find a way to slide horizontally my code:

    It is code based on Almondsoft classifieds.
    The code which basically shows eight horizontally position pictures that changes by the page refresh setting from the admin settings. I know it can be slide instead the random refresh.
    Any idea? please.

  2. Hey Brian, thanks a lot for helping! I got the slideshow but i am not able to position it as i want! I tried position:absolute with top and left attributes but it is not helping. Can you please help me? Thanks.

Leave a Comment or Ask a Question