How to Create a jQuery Slider

Created on December 28, 2018

Tony Lea tnylea

In this course you will learn how to create a simple jquery slider. You'll learn how easy it can be to create your own custom slider. Check out the course break down below:

1. Introduction

In this introduction video we'll show you what this course is about and show you the slider that we'll be creating throughout this course.

2. Laying out the Simple Design

In this video we'll get started by laying out the design of this simple jquery slider. Checkout the files that we created in this course.

index.html

<!DOCTYPE html>
<html>
<head>
	<title>jQuery Slider</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="slider/slider.css">
</head>
<body>

	<div class="slider">

		<div class="content" style="background:#99cc00">
			Content 1
		</div>

		<div class="content" style="background:#0099cc">
			Content 2
		</div>

		<div class="content" style="background:#cc9900">
			Content 3
		</div>

		<div class="slider-left"></div>
		<div class="slider-right"></div>

	</div>

</body>
</html>

style.css

body{
	margin:0px;
	padding:0px;
	background:#f1f1f1;
}

slider/slider.css

.slider{
	position:relative;
	height:480px;
	width:100%;
}

.slider .content{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	text-align:center;
	z-index:100;
}

.slider-right{
	position:absolute;
	right:0px;
	top:0px;
	width:45px;
	height:100%;
	background:#333;
	cursor:pointer;
	z-index:100;
}

.slider-left{
	position:absolute;
	left:0px;
	top:0px;
	width:45px;
	height:100%;
	background:#333;
	cursor:pointer;
	z-index:100;
}

3. Slider Click and Fade Functionality

In this video we'll show you how to change the slides in your jquery slider. We'll be adding the functionality to click between each of slides and fading them in and out. Take a look at the code used below:

index.html

<!DOCTYPE html>
<html>
<head>
	<title>jQuery Slider</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="slider/slider.css">
	<script src="slider/slider.js"></script>
</head>
<body>

	<div class="slider">

		<div class="content active" style="background:#99cc00">
			Content 1
		</div>

		<div class="content" style="background:#0099cc">
			Content 2
		</div>

		<div class="content" style="background:#cc9900">
			Content 3
		</div>

		<div class="slider-left"></div>
		<div class="slider-right"></div>

	</div>

</body>
</html>

slider.css

.slider{
	position:relative;
	height:480px;
	width:100%;
}

.slider .content{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	text-align:center;
	z-index:1;
	opacity:0;
	transition:opacity 0.5s linear;
}

.slider .content.active{
	z-index:2;
	opacity:1;
	transition:opacity 0.5s linear;
}

.slider-right{
	position:absolute;
	right:0px;
	top:0px;
	width:45px;
	height:100%;
	background:#333;
	cursor:pointer;
	z-index:100;
}

.slider-left{
	position:absolute;
	left:0px;
	top:0px;
	width:45px;
	height:100%;
	background:#333;
	cursor:pointer;
	z-index:100;
}

slider.js (new file)

$(document).ready(function(){

	$('.slider-right').click(function(){

		active = $(this).parent().find('.content.active');

		if( $(active).next('.content').length ){
			$(active).next('.content').addClass('active');
		} else {
			$(this).parent().children('.content').first().addClass('active');
		}

		$(active).removeClass('active');

	});

	$('.slider-left').click(function(){

		active = $(this).parent().find('.content.active');

		if( $(active).prev('.content').length ){
			$(active).prev('.content').addClass('active');
		} else {
			$(this).parent().children('.content').last().addClass('active');
		}

		$(active).removeClass('active');

	});

});

4. Adding the slide functionality

In this video we are going to show you how to add the slide functionality to your slider as opposed to the fade functionality. We will make our slider extendable so that way anytime we want to switch between the slide or fade functionality we can do that by changing the value of a variable.

You can find the code created in this video below:

index.html

<!DOCTYPE html>
<html>
<head>
	<title>jQuery Slider</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="slider/slider.css">
	<script src="slider/slider.js"></script>
</head>
<body>

	<div class="slider">

		<div class="content active" style="background:#99cc00">
			Content 1
		</div>

		<div class="content" style="background:#0099cc">
			Content 2
		</div>

		<div class="content" style="background:#cc9900">
			Content 3
		</div>

	</div>

</body>
</html>

slider.css

.slider{
	position:relative;
	height:480px;
	width:100%;
	overflow-x:hidden;
}

.slider .content{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	text-align:center;
	z-index:1;
	opacity:0;
	transition:opacity 0.5s linear;
}

.slider-container{
	position:absolute;
	display:block;
	height:100%;
	left:0px;
	transition:left 0.5s ease;
}

.slider .content.slide{
	opacity:1;
	position:relative;
	float:left;
}

.slider .content.active{
	z-index:2;
	opacity:1;
	transition:opacity 0.5s linear;
}

.slider-right{
	position:absolute;
	right:0px;
	top:0px;
	width:45px;
	height:100%;
	background:#333;
	cursor:pointer;
	z-index:100;
}

.slider-left{
	position:absolute;
	left:0px;
	top:0px;
	width:45px;
	height:100%;
	background:#333;
	cursor:pointer;
	z-index:100;
}

slider.js (new file)

var transition = 'slide';

$(document).ready(function(){

	if(transition == 'slide'){
		$('.slider').children().wrapAll('
');
		$('.slider-container').css('width', $('.slider').width() * $('.slider .content').length);
		$.each($('.slider .content'), function(index, value){
			$(this).addClass('slide');
			$(this).css('width', $('.slider').width());
		})
	}

	$('.slider').append('
');

	$('.slider-right').click(function(){

		if(transition == 'slide'){
			if(Math.abs($('.slider-container').position().left - $('.slider').width()) >= ($('.slider').width() * $('.slider .content').length)){
				$('.slider-container').css('left', 0);
			} else {
				$('.slider-container').css('left', $('.slider-container').position().left - $('.slider').width());
			}
		} else {
			active = $(this).parent().find('.content.active');

			if( $(active).next('.content').length ){
				$(active).next('.content').addClass('active');
			} else {
				$(this).parent().children('.content').first().addClass('active');
			}

			$(active).removeClass('active');
		}

	});

	$('.slider-left').click(function(){

		if(transition == 'slide'){
			if($('.slider-container').position().left == 0){
				$('.slider-container').css('left', -$('.slider').width() * ($('.slider .content').length-1));
			} else {
				$('.slider-container').css('left', $('.slider-container').position().left + $('.slider').width());
			}
		} else {

			active = $(this).parent().find('.content.active');

			if( $(active).prev('.content').length ){
				$(active).prev('.content').addClass('active');
			} else {
				$(this).parent().children('.content').last().addClass('active');
			}

			$(active).removeClass('active');
		}

	});

});

$(window).resize(function(){
	if(transition == 'slide'){
		$.each($('.slider .content'), function(index, value){
			$(this).css('width', $('.slider').width());
		});
	}
});

5. Adding the slide functionality

In this video we are going to show you how to add the slide functionality to your slider as opposed to the fade functionality. We will make our slider extendable so that way anytime we want to switch between the slide or fade functionality we can do that by changing the value of a variable.

You can find the code created in this video below:

index.html

<!DOCTYPE html>
<html>
<head>
	<title>jQuery Slider</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="slider/slider.css">
	<script src="slider/slider.js"></script>
</head>
<body>

	<div class="slider">

		<div class="content active" style="background:#99cc00">
			Content 1
		</div>

		<div class="content" style="background:#0099cc">
			Content 2
		</div>

		<div class="content" style="background:#cc9900">
			Content 3
		</div>

	</div>

</body>
</html>

slider.css

.slider{
	position:relative;
	height:480px;
	width:100%;
	overflow-x:hidden;
}

.slider .content{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	text-align:center;
	z-index:1;
	opacity:0;
	transition:opacity 0.5s linear;
}

.slider-container{
	position:absolute;
	display:block;
	height:100%;
	left:0px;
	transition:left 0.5s ease;
}

.slider .content.slide{
	opacity:1;
	position:relative;
	float:left;
}

.slider .content.active{
	z-index:2;
	opacity:1;
	transition:opacity 0.5s linear;
}

.slider-right{
	position:absolute;
	right:0px;
	top:0px;
	width:45px;
	height:100%;
	background:#333;
	cursor:pointer;
	z-index:100;
}

.slider-left{
	position:absolute;
	left:0px;
	top:0px;
	width:45px;
	height:100%;
	background:#333;
	cursor:pointer;
	z-index:100;
}

slider.js (new file)

var transition = 'slide';

$(document).ready(function(){

	if(transition == 'slide'){
		$('.slider').children().wrapAll('
');
		$('.slider-container').css('width', $('.slider').width() * $('.slider .content').length);
		$.each($('.slider .content'), function(index, value){
			$(this).addClass('slide');
			$(this).css('width', $('.slider').width());
		})
	}

	$('.slider').append('
');

	$('.slider-right').click(function(){

		if(transition == 'slide'){
			if(Math.abs($('.slider-container').position().left - $('.slider').width()) >= ($('.slider').width() * $('.slider .content').length)){
				$('.slider-container').css('left', 0);
			} else {
				$('.slider-container').css('left', $('.slider-container').position().left - $('.slider').width());
			}
		} else {
			active = $(this).parent().find('.content.active');

			if( $(active).next('.content').length ){
				$(active).next('.content').addClass('active');
			} else {
				$(this).parent().children('.content').first().addClass('active');
			}

			$(active).removeClass('active');
		}

	});

	$('.slider-left').click(function(){

		if(transition == 'slide'){
			if($('.slider-container').position().left == 0){
				$('.slider-container').css('left', -$('.slider').width() * ($('.slider .content').length-1));
			} else {
				$('.slider-container').css('left', $('.slider-container').position().left + $('.slider').width());
			}
		} else {

			active = $(this).parent().find('.content.active');

			if( $(active).prev('.content').length ){
				$(active).prev('.content').addClass('active');
			} else {
				$(this).parent().children('.content').last().addClass('active');
			}

			$(active).removeClass('active');
		}

	});

});

$(window).resize(function(){
	if(transition == 'slide'){
		$.each($('.slider .content'), function(index, value){
			$(this).css('width', $('.slider').width());
		});
	}
});

Comments (0)

Introduction

5 videos (33 minutes)

Autoplay?

0% completed
Now Playing 1. Introduction
2. Laying out the Simple Design
3. Slider Click and Fade Functionality
4. Adding the slide functionality
5. Adding the arrow navigation