WordPress Code Snippets

A fresh mix of code snippets and tutorials

Basic Code for Image Slider


Here is the basic code required for making a simple image slider. It provides a good starting point for rolling your own sliders, carousels, and so forth.

Step 1: The HTML

First add the required minimal markup:

Notice the markup is kept as simple as possible. Only one class name to worry about, and only one outer <div>. The key to making this work is making sure that the images exist, and that the paths specified for the <img> elements are correct.

Step 2: The CSS

Next, here is the basic CSS required to style the markup and make it look like an actual slider. Include the following on the page:

This is about as basic as I could make it, with only one selector and minimal amount of CSS. It includes a few embellishments that may be tweaked or removed as desired. Mostly these styles are meant as a starting point for further development.

Note that the slider is sized at 580px (width) by 380px (height). Make sure that your images are sized accordingly, or modify the CSS to match your images.

Step 3: The jQuery

Lastly, we need the following jQuery snippet to make the magic happen:

There are various things that can be tweaked here, such as the interval, 2000, and speed, 200, of each slide. Again, the whole idea here is to keep things as basic as possible to give fellow DIY’s out there a solid starting point for implementing their own image slider. Note that we are including the latest version of jQuery via Google API Hosted Libraries.

That’s all there is to it. Slap each of those code chunks into an HTML file and enjoy a super-minimal starting point for building your own slider for images and/or other content.

Show Support

Like our new Facebook Page to show support!