Login
Sign Up
Teach

Login to Finish Watching

Howdy, this video is free to watch, but you need to login first :)

How to Create a jQuery Slider

5 videos (33 minutes)

Autoplay?

Now Playing 1. Introduction (50 seconds)
Now Playing 2. Laying out the Simple Design (6 min. 28 sec.)
Now Playing 3. Slider Click and Fade Functionality (5 min. 52 sec.)
Now Playing 4. Adding the slide functionality (16 min. 8 sec.)
Now Playing 5. Adding the arrow navigation (4 min. 13 sec.)

How to Create a jQuery Slider
Favorite

on Dec 28, 2018created byTony Lea

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());
		});
	}
});

Share This Video:

×

Cheers Friend!

I'm Tony, the creator of this site. I'm trying to increase my twitter following. Want to follow me?

Follow @tnylea If not, no worries :)