Create custom jquery slider with progress

1.41K views
no comments
6 Feb 2017 12:35 am
Resource Files
Launch Demo

This custom slider tutorial tell you how to create slider with your own logic, without using any slider plugin

SLIDER HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Create custom jquery slider with progress</title>
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/jquery-ui.js"></script>
</head>
<body>
<div class="slider_div">
	<div class="slides">

		<div class="single_slide active_slide">
			<h2 class="slide_heading">SDTuts.com Slide-1</h2>
			<p class="slide_para">
				It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here. just small text for example! <a href="#">Read more</a>
			</p>
			<div class="slider_image">
				<img src="images/34534654656756845.jpg" />
			</div>
		</div>

		<div class="single_slide">
			<h2 class="slide_heading">SDTuts.com Slide-2</h2>
			<p class="slide_para">
				It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here. just small text for example! <a href="#">Read more</a>
			</p>
			<div class="slider_image">
				<img src="images/39048tu0er9gj8er9p8gjvsdf.jpg" />
			</div>
		</div>

		<div class="single_slide">
			<h2 class="slide_heading">SDTuts.com Slide-3</h2>
			<p class="slide_para">
				It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here. just small text for example! <a href="#">Read more</a>
			</p>
			<div class="slider_image">
				<img src="images/asdfjasf890ua89u.jpg" />
			</div>
		</div>

		<div class="single_slide">
			<h2 class="slide_heading">SDTuts.com Slide-4</h2>
			<p class="slide_para">
				It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here. just small text for example! <a href="#">Read more</a>
			</p>
			<div class="slider_image">
				<img src="images/image1212131.jpg" />
			</div>
		</div>

		<div class="single_slide">
			<h2 class="slide_heading">SDTuts.com Slide-5</h2>
			<p class="slide_para">
				It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here. just small text for example! <a href="#">Read more</a>
			</p>
			<div class="slider_image">
				<img src="images/sdf89uas0d9f8ua90sdfuas90.jpg" />
			</div>

		</div>
		<div class="controls">
			<input type="button" title="next slide"  data-slidetarget="next" class="nextprevbtn movenext" />
			<input type="button" title="prev slide" data-slidetarget="prev" class="nextprevbtn moveprev" />
		</div>
		<div class="progress"></div>

	</div>
</div>
</body>

 

SLIDER CSS STYLES

body{
	margin:0px;
	padding:0px;
}
*{
	font-family:consolas;
}

a{
	opacity:0.8;
	color:#F00000;
	text-decoration:none;
}
a:hover{
	opacity:1;
}

.single_slide{
	display:none;
	float: left;
	position: relative;
}
.active_slide{
	display:block !important;
}
.slider_div{
	margin: 0 auto;
	width: 80%;
	background: #EAEAEA;
	margin-top:20px;
	overflow:hidden;
}
.slides{
	position:relative;
}
.slide_heading{
	position: absolute;
	top: 50px;
	left: 50px;
	background-color: rgba(0, 0, 0, 0.67);
	color: #C1C1C1;
	padding: 5px 10px;
	width: 380px;
}
.slide_para{
	position: absolute;
	top: 100px;
	left: 50px;
	background-color: rgba(0, 0, 0, 0.67);
	width: 450px;
	padding: 5px 10px;
	color: #9F9F9F;
	text-align: justify;
}
.controls{
	width: 45px;
	background: rgba(0, 0, 0, 0.41);
	position: absolute;
	right: 0px;
	overflow: hidden;
	height: 351px;
}
.nextprevbtn{
  width: 30px;
  height: 30px;
  background-color: white;
  border: none;
  outline: none;
  margin: 4px 8px;
  opacity:0.8;
  background-repeat:no-repeat;
  background-position:5px;
}
.nextprevbtn:hover{
	opacity:1;
	cursor:pointer;
}
.moveprev{
	background-image:url(images/uparrow.png);
}
.movenext{
	background-image:url(images/downarrow.png);
}
.progress{
	position: absolute;
	background: #9C2200;
	height: 14px;
	width: 0px;
	top: 337px;
	left: 0px;
}

 Add jquery document ready event and define some variables like slider animation time and slide change time in seconds

<script type="text/javascript">
var j;	//defined j as variable
window.j = jQuery; //make it window global variable
j(document).ready(function (){
	var change_slidetime;
	var slide_animation_time;
	slide_animation_time = 6000;
	slide_change_time= 6000;	//SIX SECONDS
});</script>

Define function run_progress for initialize progress of slider

function run_progress(slide_target){
 $('.progress').css({"width":"0px"}).animate({"width":"99.9%"},slide_change_time, function (){
 move_slide(slide_target);
 });
 }

Call run_progress function

run_progress();

Define move_slide function that called in run_progress with parameter of slide_target

function move_slide(slide_target){
}

Note: below code in under move slide function

Get the length of total slides, and

var total_slides = $('.single_slide').length;

Set slider

Set next slide if passed parameter of function move_slide in slide_target variable that undefined or null empty or not previous, in next line  get current slide element and another next line get the next slide with jquery .NEXT with class of single_slide, on next line check if next slide not available or not exists for example if slider have 10 total slides and current slide is 10 so next slide not exists and then I set to eq(0) to first slide of slider.

if(typeof slide_target ==='undefined' || slide_target == '' || slide_target !='prev'){
	var current_slide = $('.single_slide.active_slide');
	var next_target = current_slide.next('.single_slide');
	if(typeof next_target.prop('tagName')==='undefined'){
		next_target = $('.single_slide').eq(0);  //start again from first slide
	}
}

ABOVE IF END AND ELSE CODE START

In below else code get current_slide element and next line get the next slide element to and another if condition work if next target mean previous slide not exists in example current slide is 1 and previous slide also 1 then slide target will the last slide of slider

else {
	var current_slide = $('.single_slide.active_slide');
	var next_target = current_slide.prev('.single_slide');
	if(typeof next_target.prop('tagName')==='undefined'){
		next_target = $('.single_slide').eq(parseInt(total_slides)-1);  //set target the last slide
	}
}

UN ACTIVE CURRENT SLIDE AND ACTIVE NEXT CLASS

Now we have next slide target of both conditions next or previous slides so in below code we remove class activeslide in current slide and because I have set display none on single_slide class and made display:block on active_slide and add a simple fade in effect on activation slide.

current_slide.removeClass('active_slide').css({"display":"none"});
next_target.fadeIn(400).addClass('active_slide');

ADD ANIMATION WITH JQUERY UI EASING

On slide activation move the slide heading (title) to top-400px and then animate it with Easing “easeInOutBounce” and add something like that animation to slider paragraph

next_target.find('.slide_heading').css({"top":"-400px"}).animate({"top":"50px"},800,'easeInOutBounce');
next_target.find('.slide_para').css({"top":"-800px"}).animate({"top":"100px"},1300,'easeOutElastic');

MOVE NEXT PREVIOUS SLIDE ON CLICK

I have added class nextprevbtn on next and previous both buttons on next line set stop animation to reset progress bar, If I don’t stop animation of progress bar it run and I just click on next slide button and slide move to next but progress bar completed at the same time then two slides will be moved, so I stop progress animation and call function move_slide with next previous button attattribute data-slidetarget=”next” and  data-slidetarget=”pervious” 

$('body').delegate('.nextprevbtn','click',function (){
	$('.progress').stop();	//stop animation if progress running
	move_slide($(this).attr('data-slidetarget'));
});

After Call function of move_slide, it will call function run_progress

 

Here is complete code of jquery slider

$(document).ready(function(){
	var slide_change_time = 8000 //six seconds
	run_progress();
	function run_progress(slide_target){
		$('.progress').css({"width":"0px"}).animate({"width":"99.9%"},slide_change_time, function (){
			move_slide(slide_target);
		});
	}

	function move_slide(slide_target){
		var total_slides = $('.single_slide').length;
		if(typeof slide_target ==='undefined' || slide_target == '' || slide_target !='prev'){
			var current_slide = $('.single_slide.active_slide');
			var next_target = current_slide.next('.single_slide');
			if(typeof next_target.prop('tagName')==='undefined'){
				next_target = $('.single_slide').eq(0);  //start again from first slide
			}
		} else {
			var current_slide = $('.single_slide.active_slide');
			var next_target = current_slide.prev('.single_slide');
			if(typeof next_target.prop('tagName')==='undefined'){
				next_target = $('.single_slide').eq(parseInt(total_slides)-1);  //set target the last slide
			}

		}
		current_slide.removeClass('active_slide').css({"display":"none"});
		next_target.fadeIn(400).addClass('active_slide');

		next_target.find('.slide_heading').css({"top":"-400px"}).animate({"top":"50px"},800,'easeInOutBounce');
		next_target.find('.slide_para').css({"top":"-800px"}).animate({"top":"100px"},1300,'easeOutElastic');
		run_progress('next');
	}

	$('body').delegate('.nextprevbtn','click',function (){
		//$('.progress, .slide_heading, .slide_para').stop();	//stop animation if progress running
		$('.progress').stop();	//stop animation if progress running
		move_slide($(this).attr('data-slidetarget'));
	});
});
Demosslidervideotutorial

NOTE:Your Email Address will be not shown and please do not add spamming comments because here is REL="NOFOLLOW" on your links and comments also moderated shown.
<code>Put html css or any language code under this tag</code>

TOP POSTS

TOP VIEWED

TOP COMMENTED

MOST RECENT