Table of Contents
Well, this might be against some advice skilled bloggers would give me. However, I’m going to risk it and instead of waiting couple days to release this second part of the slider tutorial, I will release it today. Just to remind you, in first part we took care about HTML and CSS required for building up the slider. In this part we are going to enhance current code with jQuery to make it fully functional.
Assets
Below are all the assets we used in previous part and also links to live demo on Codepen and repository on Github. You can get the codes on both places.
Normalize stylesheet:
//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css
Font awesome:
//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css
jQuery:
//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js
Codepen demo:
https://codepen.io/d3v3r0/pen/NPWKay
Github:
https://github.com/d3v3r0/jQuery-slider-with-controlls
Without further ado, let’s dive into jQuery and finish the slider.
jQuery
The first thing we will do is to create a new function that will be executed right after loading the page and all its content. This function will contain all code for the slider.
jQuery:
$(function() {});
The next step is to create two new variables. First will be called “$firstSlide” and we will assign it to the first slide via “slide” class and :first-child selector. Second will be called “$secondSlide” and in this case we will again use “slide” class and :last-child selector. The dollar sign in the names of variables is just a way to mark a jQuery variable and have no functional purpose. It is just easier to recognize which variable is managed by jQuery and which by plain JavaScript.
jQuery:
var $firstSlide = $('.slide:first-child');
var $lastSlide = $('.slide:last-child');
As you might remember, in previous part, we created a special CSS class called “js-active” and assign it to the first slide (li). Now we will use “slide” class, :not selector and “js-active“ class to select all slides that does not have this class (“js-active”) and then hide them with jQuery hide() function.
jQuery:
$('.slide:not(".js-active")').hide();
Now, let’s put together code for left control. We will select it via “js-control-left” class and use jQuery click() function to listen for clicks on this element. Inside this function we will create new if statement. This statement will use jQuery index() function to check if the li element with class “js-active” is the first one (0th index). Don’t forget that in JavaScript the first element is on index of 0.
jQuery:
$('.js-control-left').click(function() {
if ($('li.js-active').index() == 0) {} else {}
}
If true is returned (slide is first), this slide will fade out using jQuery fadeOut() function with parameter of 500. This number stands for speed in milliseconds of fading out (or in). Next, we will use removeClass() jQuery function with “js-active” as parameter to remove this class from the li element. After this, we will use “$lastSlide” variable with toggleClass() jQuery function again with “js-active” parameter to toggle this class to the last slide (3rd). The last thing is to use fadeIn() jQuery function with parameter of 500 to smoothly fade the last slide in.
jQuery:
$('.js-active').fadeOut(500).removeClass('js-active');
$lastSlide.toggleClass('js-active').fadeIn(500);
On the other hand, when false is returned, we are going to select slide with “js-active” class fade it out with fadeOut() function, remove the “js-active” class, then jump to previous li element using jQuery prev() function with “li” as parameter, toggle “js-active” class to this li element and fade it in with fadeIn() function. To make it consistent, fading will be always done with 500 milliseconds as a parameter.
jQuery:
$('.js-active').fadeOut(500).removeClass('js-active').prev('li').toggleClass('js-active').fadeIn(500);
This is the end of the if statement and also the last line of code for left controller (angle). For better clarity, below is whole code for left controller.
jQuery:
$('.js-control-left').click(function() {
if ($('li.js-active').index() == 0) {
$('.js-active').fadeOut(500).removeClass('js-active');
$lastSlide.toggleClass('js-active').fadeIn(500);
} else {
$('.js-active').fadeOut(500).removeClass('js-active').prev('li').toggleClass('js-active').fadeIn(500);
}
});
Now, let’s take care about the right one. The procedure will be similar to left controller. We will select it through “js-control-right” class, use click() function and create new if statement inside this function. This statement will again use index() to check if li element with “js-active” class is the last one (2nd index).
jQuery:
$('.js-control-right').click(function() {
if ($('li.js-active').index() == 2) {} else {}
});
When true is returned by if statement, the li element with “js-active” class will be selected, faded out with fadeOut() function and then the “js-active” class will be removed using removeClass() function. After that, we will use “$firstSlide” variable, use toggleClass() to toggle the “js-active” class to the first slide and fade it in with fadeIn() function.
jQuery:
$('.js-active').fadeOut(500).removeClass('js-active');
$firstSlide.toggleClass('js-active').fadeIn(500);
For case of false, element with “js-active” class will be selected and this class will be removed by removeClass(). Then, we will use fadeOut() function to smoothly hide this slide. Next step is to use next() jQuery function with “li” as a parameter to select next li element, toggle the “js-active” class to it and fade it in.
jQuery:
$('.js-active').removeClass('js-active').fadeOut(500).next('li').toggleClass('js-active').fadeIn(500);
With this we have completed code for right controller and also complete code for whole slider. In this tutorial we used something called chaining. If you have no previous experience with this feature, it basically means ability to chain together various methods or functions and they will be executed in that exact order. This will help you write shorter code without the need to repeat variables.
Below is whole code put together.
$(function() {
var $firstSlide = $('.slide:first-child');
var $lastSlide = $('.slide:last-child');
$('.slide:not(".js-active")').hide();
$('.js-control-left').click(function() {
if ($('li.js-active').index() == 0) {
$('.js-active').fadeOut(500).removeClass('js-active');
$lastSlide.toggleClass('js-active').fadeIn(500);
} else {
$('.js-active').fadeOut(500).removeClass('js-active').prev('li').toggleClass('js-active').fadeIn(500);
}
});
$('.js-control-right').click(function() {
if ($('li.js-active').index() == 2) {
$('.js-active').fadeOut(500).removeClass('js-active');
$firstSlide.toggleClass('js-active').fadeIn(500);
} else {
$('.js-active').removeClass('js-active').fadeOut(500).next('li').toggleClass('js-active').fadeIn(500);
}
});
});
Summary
Congrats folks! The jQuery slider is complete and working exactly as it should. Now, the content will smoothly cycle when you click on left or right controller (angle). As you can see, nothing is hard to do. As always, feel free to use the code wherever you want.
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 🙂
Become a Patron
