Make Custom Slider

Published on : April 27, 2026

Author: wahid

Category: Web Development

By using the following process you can make custom slider if you are not able to use plugin for slider. If you can understand the whole process you can make custom slider as you wish.

The main concept is to make custom slider take two div.
[sourcecode]
<div>
<div>
</div>
</div>

[/sourcecode]

In our code we give a name outer to the parent div and give a name inner to the child div. Suppose you have 3 content which will be slide when you click on next or previous button. In our example each content width is 586px. That’s why our outer div width is 586px.

As we have 3 content div. Each div width is 586px. So the inner div width will be 586*3 px that means 1758px. And look at outer class in our example.

The overflow is hidden for the outer div.

And then you can use your own script to make custom slider. If you looks our script you can understand easily how it works.

Html

[sourcecode]
<html>
<head>
<title>How to make a custom slider</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript">
var start = 1;
var end = 0;
var element =”;
var element1 = ”;
function prev(){
start– ;
element = document.getElementById(‘right1’);
element.setAttribute(‘onclick’,’next();’);
element.setAttribute(‘class’,’sprite hlsab-right-arrow’);
if(start != 1){
element1 = document.getElementById(‘left1’);
element1.setAttribute(‘onclick’,’prev();’);
element1.setAttribute(‘class’,’sprite hlsab-left-arrow’);
}
if(start == 1){
element1 = document.getElementById(‘left1’);
element1.setAttribute(‘onclick’,”);
element1.setAttribute(‘class’,’sprite hlsab-left-arrow-nonactive’);
}
end = end + 586;
$(".inner").animate({left:end+’px’});
}

function next(){

start++;
element1 = document.getElementById(‘left1’);
element1.setAttribute(‘onclick’,’prev();’);
element1.setAttribute(‘class’,’sprite hlsab-left-arrow’);

if(start == 3){
element = document.getElementById(‘right1’);
element.setAttribute(‘onclick’,”);
element.setAttribute(‘class’,’sprite hlsab-right-arrow-nonactive’);
}
end = end – 586;
$(".inner").animate({left:end+’px’});
}
</script>

</head>
<body>
<div id="wrap">
<div id="left1" class="sprite hlsab-left-arrow-nonactive" onclick="prev();"></div>
<div id="right1" class="sprite hlsab-right-arrow" onclick="next();"></div>

<div class="outer" style="margin-top: -5px;">
<div class="inner">
<!– 1 –>
<div style="float:left;" class="hlsab-habit">
<h3>Heading 1</h3>
<div class="hlsab-habit-left">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,</p>
</div>

</div>

<!– 2 –>
<div style="float:left" class="hlsab-habit">
<h3>Heading 2</h3>
<div class="hlsab-habit-left">
<p>vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus</p>
</div>
</div>

<!– 3 –>
<div style="float:left;" class="hlsab-habit">
<h3>Heading 3</h3>
<div class="hlsab-habit-left">
<p>dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
[/sourcecode]

CSS

[sourcecode]
*{ padding:0px; margin:0px; }

#wrap{
width:650px;
margin:auto;
text-align:left;
}

.outer{width:586px; overflow:hidden; position:relative;}
.inner{ width:1758px; position:relative; float:left;}

.hlsab-habit{
width:534px;
padding:20px 25px 20px 25px;
border-left:1px solid #e1e1e1;
border-right:1px solid #e1e1e1;
float:left;
position:relative;
}

.hlsab-habit-left{
width:500px;
float:left;
position:relative;
}

.sprite{
background:url(http://www.healthline.com/hlcmsresource/images/slideshow-ab/img/bt.png) no-repeat top left;
width:406px;
height:554px;
}

.sprite.hlsab-left-arrow{
background-position:-105px -51px;
width:55px;
float:left;
position:absolute;
left:322px;
top:43px;
z-index:1;
height:108px;
cursor:pointer;
}

.sprite.hlsab-left-arrow-nonactive{
background-position:-105px -51px;
width:55px;
float:left;
position:absolute;
left:322px;
top:43px;
z-index:1;
height:108px;
/*cursor:pointer; */
opacity:0.5;
}

.sprite.hlsab-left-arrow:hover{
background-position:-105px -217px;
width:55px;
float:left;
position:absolute;
left:322px;
top:43px;
z-index:1;
height:108px;
cursor:pointer;
}

.sprite.hlsab-left-arrow:active{
background-position:-105px -388px;
width:auto;
float:left;
position:absolute;
left:322px;
top:43px;
z-index:1;
width:55px;
height:108px;
}

.sprite.hlsab-right-arrow{
background-position:-224px -51px;
width:55px;
float:left;
position:absolute;
right:387px;
top:43px;
z-index:1;
height:108px;
cursor:pointer;
}
.sprite.hlsab-right-arrow:hover{
background-position:-224px -217px;
width:55px;
float:left;
position:absolute;
right:387px;
top:43px;
z-index:1;
height:108px;
cursor:pointer;
}
.sprite.hlsab-right-arrow:active{
background-position:-224px -388px;
width:auto;
float:left;
position:absolute;
right:387px;
top:43px;
z-index:1;
width:55px;
height:108px;
}

.sprite.hlsab-right-arrow-nonactive{
background-position:-224px -51px;
width:auto;
float:left;
position:absolute;
right:387px;
top:43px;
z-index:1;
width:55px;
height:108px;
opacity:0.5;
}
[/sourcecode]