Simple jQuery slider tutorial

Table of Contents

Today’s post will be about creating a very simple image slider (or any kind of data) you can use in your projects. I know that there are many sliders on the web, but they are often too complicated and contain unnecessary effects and garbage code. For this reason, we will create image slider that will automatically cycle through couple of images along with fading effect. Let’s dive in …

HTML

First thing we have to do is to set our HTML structure for this project. HTML will start with regular <doctype>, <html>, <head> and <body> tags (don’t forget to also include closing tags). Since the default language of the website (project) is English we will also set “lang” attribute for <html> tag to “en”. Inside “head” section will be title tag and meta tag for “charset”, which is for character coding, set to “utf-8”.

HTML:

<!DOCTYPE html>
<html lang=”en”>
 <head>
 <title>jQuery Slider</title>
 <meta charset=”utf-8”>
 </head>
 <body>
 </body>
</html>

When we have the required setting for valid HTML document, we can add our slides. To do this, we will create unordered list (<ul>) with class “slider”. This list will contain five list items (<li>) with class ”slide”. Each of them will contain single image (<img>). As a source for images I will use website pexels.com. This website offers big amount of free images which you can use without any limitations.

HTML:

<ul class="slider">
 <li class="slide"><img src="https://static.pexels.com/wp-content/uploads/2014/09/coffee-macchiato-2973-829x550.jpg" alt="Slide 1" /></li>
 <li class="slide"><img src="https://static.pexels.com/wp-content/uploads/2014/09/box-package-tea-3040-825x550.jpg" alt="Slide 2" /></li>
 <li class="slide"><img src="https://static.pexels.com/wp-content/uploads/2014/09/autumn-cigarettes-hazelnuts-29751-825x550.jpg" alt="Slide 3" /></li>
 <li class="slide"><img src="https://static.pexels.com/wp-content/uploads/2014/09/coffee-coffee-machine-cup-3042-825x550.jpg" alt="Slide 4" /></li>
 <li class="slide"><img src="https://static.pexels.com/wp-content/uploads/2014/09/drink-food-preparation-2761-829x550.jpg" alt="Slide 5" /></li>
</ul>

This is everything we need for this project when it comes to HTML. Now we can move to CSS and customize the styles a bit.

CSS

First thing, we will look at, is our list with class “slider”. We need to set its position to “relative” (list items will be set to absolute). After that, we will reset margin and padding (set them to 0) to get rid of the white space around.

CSS:

.slider {
 position: relative;
 margin: 0;
 padding: 0;
}

Next, let’s style the list items. We will select them via class “slide” and begin with setting their position to “absolute” and top and bottom to 0. In order to get slides in the same size, we will also set width to 480px and height to 320px. That is all for list items.

CSS:

.slide {
 position: absolute;
 top: 0;
 left: 0;
 width: 480px;
 height: 320px;
}

Last thing in CSS is to modify the images. It will be very quick. We only need to set both, the width and height, to 100%. This will cause that images will have the size as their parent elements (list items), so their size will be 480px x 320px.

With this we have our CSS covered and can dive into jQuery to add little bit more dynamics to our slider.

jQuery

First line can be written in two ways. You can either select “document” with “ready” method and “function” followed by pair of parenthesis and pair of curly brackets inside parenthesis or you can omit the first part and use “function” keyword inside parenthesis instead. Don’t forget to include jQuery symbol first ($). No matter what you choose, it will have the same effect – script will be executed after loading the content of the page. I will show you both ways.

jQuery:

// first way with document
$(document).ready(function () {});
// second way with function
$(function() {});

Because shorter is better (when it comes to code), we will go with the “function” option. Inside the curly brackets, on the first line we have to write code that will hide all the slides. Otherwise, we would get stuck between two slides. We will select our list items via their class ”slide” and selector “:gt()“. This selector takes index as a parameter. “gt” is shortcut for “greater than” so, as you probably guessed, it will select all elements from specified index up. To hide all selected slides we will use parameter 0 and jQuery method hide().

jQuery:

$('.slide:gt(0)').hide();

First line was pretty short, but don’t worry, it will get more complicated. Next step is to use “setInterval” method. This method will be used to automate the cycling between images. This method calls a function, which will contain code for slider and also takes a time in milliseconds to set the time span between individual cycles. Let’s set the time span to 2500 milliseconds. We don’t have to use jQuery symbol with this method because it is built in JavaScript.

jQuery:

setInterval(function() {}, 2500)

Now we have to write the whole code for controlling the behavior of slider (we will use ability of JavaScript and jQuery called chaining). This will be inside the curly brackets. To start we will select the first slide via “slide” class and jQuery “:first” selector.

jQuery:

$('.slide:first');

What comes next will be a chain of jQuery methods and also the last line of the jQuery code. First method is fadeOut() to hide the first slide. Let’s use ‘slow’ as a parameter to make hiding smoother.

jQuery:

$('.slide:first').fadeOut('slow');

Next method will be next(). This will select the next element right after our selected – second slide. It takes no parameters.

jQuery:

$('.slide:first').fadeOut('slow').next();

After selecting next slide we will use fadeIn() method with parameter “slow” to show this next slide.

jQuery:

$('.slide:first').fadeOut('slow').next().fadeIn('slow');

The last two methods we have to include are end() and appendTo() this with parameter “slider”. end() method will stop cycling and return to first slide and appendTo() will append this slide to our list (“slider”) so the cycling can start over again from the first slide.

jQuery:

$('.slide:first').fadeOut('slow').next().fadeIn('slow').end().appendTo('.slider');

The whole code for jQuery will look like this:

jQuery:

$(function() {
 $('.slide:gt(0)').hide();
 setInterval(function() {
   $('.slide:first').fadeOut('slow').next().fadeIn('slow').end().appendTo('.slider');
 }, 2500)
});

Summary

This is the end. We successfully achieved our goal and created our simple slider with jQuery library. I hope you enjoyed this tutorial. If you want to explain something more-in-depth, leave a comment or write me message via links below. At the bottom is also a link to live version of the slider on Codepen. AD

Codepen:

https://codepen.io/d3v3r0/pen/DtFeC

If you liked this article, please subscribe so you don't miss any future post.

If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂

By Alex Devero

I'm Founder/CEO of DEVERO Corporation. Entrepreneur, designer, developer. My mission and MTP is to accelerate the development of humankind through technology.

3 comments

  2. Hi there I am so excited I found your site, I really found you by accident, while I was looking on Aol for something else, Regardless I am here now
    and would just like to say thank you for a remarkable post and a all round exciting blog (I also love the theme/design), I don’t
    have time to look over it all at the moment but I have bookmarked it and also included your RSS feeds, so when I have time
    I will be back to read much more, Please do keep up the fantastic b.

    Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.