PLATFORM

Tails

Create websites with TailwindCSS
Wave

Start building the next great SAAS
Pines

Alpine & Tailwind UI Library
Auth

Plug'n Play Authentication for Laravel
Designer comingsoon

Create website designs with AI
DevBlog comingsoon

Blog platform for developers
Static

Build a simple static website
SaaS Adventure

21-day program to build a SAAS

COMMUNITY

MORE

How to Create a jQuery Slider

Created on December 28, 2018

Tony Lea tnylea

Follow

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)

loading comments

Introduction

5 videos (33 minutes)

Autoplay?

0% completed

Now Playing 1. Introduction (50 seconds)

2. Laying out the Simple Design (6 min. 28 sec.)

3. Slider Click and Fade Functionality (5 min. 52 sec.)

4. Adding the slide functionality (16 min. 8 sec.)

5. Adding the arrow navigation (4 min. 13 sec.)