How To Create Custom Slider with Custom JavaScript

People love to see images & graphics and slider effects is one of the best way to display this on websites. As a designer you always search for jQuery/JavaScript image slider codes on google and integrate them with your design. Also most of the designers think that it would be difficult to make a custom image slider code by own. But it is not that difficult if you wish to create custom slider with JavaScript.

Here in this article I am going to show you how you can create a custom slider effects for images by using JavaScript with HTML & CSS. You need to have basic understanding of HTML, CSS & JavaScript and how JavaScript interact with HTML dom object.

At first we will create a very simple HTML element nodes.

<div id="slider">

<div id="silde1"><h1> Slide 1</h1></div>

<div id="silde2"><h1> Slide 1</h1></div>

<div id="silde3"><h1> Slide 1</h1></div>

</div>

It creates the area of slideshow codes. Now we can write some basic CSS codes for this slide show.

#slider{
position: relative;
width: 300px;
height: 100px;
line-height: 50px;
border: 3px solid black;
text-align: center;
background-color: black;
color: wheat;
overflow: hidden;
}

#slide1, #slide2, #slide3{
position: absolute;
top: 0px;
left: 0px;
width: 300px;
height: 100px;
text-align: center;
}

.show{
display:block;
}

.hide{
display:none;
}

we can create JS Codes for this application. Here we are writing JS Codes for adding

hide state for HTML slide elements.
show state setup for HTML one slide after hiding.

JavaSctipt Codes For this.

var sliderId = "slider";

var count = document.getElementById(sliderId).childElementCount;

function hideAll(){
for(var i = 1; i<=count;i++){
var id = 'slide'+i;
var slide = document.getElementById(sliderId).children[i-1];
slide.className = 'hide';
}
}

function show(no,name,duretion){
hideAll();
var slide = document.getElementById(sliderId).children[no-1];
slide.className = 'show';
slide.style.animationName = name;
slide.style.animationDuration = duretion;
}

show();

After this codes If you can use the codes for animation.

var current = 1;
var time =  5;
var effect =  'show';
var effectTime =  '1s';

// First Time Init
show(current,effect,effectTime);

// Auto Slide Mode
setInterval(function auto(){
if(current>=count){
current = 1;
}else{
current++;
}
show(current,effect,effectTime);
},(1000*time));

Through this codes you can make automated slideshow with 5 seconds duration. setInterval syntax can create an animation function calling. This syntax give repeatedly function calling activity and also can set few delay time we can used here eg: setIntervel(function(){...},1000);

But when we are using some special effects in our slider then we need to create some CSS codes for styling and animation.

@keyframes show{
0%{
opacity: 0.0;
}
100%{
opacity: 1.0;
}
}

@keyframes shake {
0% {
position: absolute;
background-color: black;
color: white;
left: 0px;
}
25%{
background-color: black;
color: white;
left: -300px;
}
50% {
background-color:white;
color: black;
left: 300px;
}
100% {
background-color: black;
color: wheat;
left: 0px;
}

}

@keyframes zoom {
0%{
background-color: black;
color: white;
left: 145px;
top: 45px;
width: 0px;
height: 0px;
font-size: 9pt;
overflow: hidden;
}
50%{
background-color: white;
color: black;
left: 0px;
top: 0px;
width: 300px;
height: 150px;
font-size: 20pt;
overflow: hidden;
}
100%{
background-color: black;
color: wheat;
left: 0px;
}
}

@keyframes flip{
0%{
background-color: black;
color: black;
opacity: 1.0;
overflow: hidden;
}
50%{
background-color: white;
color: white;
opacity: 1.0;
width: 1px;
left: 150px;
overflow: hidden;
}
100%{
opacity: 1.0;
background-color: black;
}
}

This codes makes your Interactive Slideshow. This is the main concept of Slideshow using HTML, CSS and JavaScript without using jQuery.

Now Full Code Snippet:

HTML Code:-

<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="effectto.css">
</head>
<body>
<div id="slider">
<div id="slide1">
<h1>Slide 1 View</h1>
</div>
<div id="slide2">
<h1>Slide 2 View</h1>
</div>
<div id="slide3">
<h1>Slide 3 View</h1>
</div>
<div id="slide4">
<h1>Slide 4 View</h1>
</div>
<div id="slide5">
<h1>Slide 5 View</h1>
</div>
<div id="slide6">
<h1>Slide 6 View</h1>
</div>
<div id="slide7">
<h1>Slide 7 View</h1>
</div>
<div id="slide8">
<h1>Slide 8 View</h1>
</div>
</div>
<button id="prev">Previous</button> || <button id="next">Next</button>

<div id="slider2">
<div>
<h1>Onther 1</h1>
</div>
<div>
<h1>Onther 2</h1>
</div>
<div>
<h1>Onther 3</h1>
</div>
</div>

<div id="slider1">
<div>
<h1>Onther 1</h1>
</div>
<div>
<h1>Onther 2</h1>
</div>
<div>
<h1>Onther 3</h1>
</div>
</div>

<script src="effectto.js"></script>
<script>
window.onload = function(){
Effectto('slider',5,'flip','2s');
Effectto('slider1',5,'shake','2s');
Effectto('slider2',5,'zoom','2s');
};
</script>

</body>
</html>

CSS Codes : Name:- effecto.css

#slider, #slider1, #slider2{
position: relative;
width: 300px;
height: 100px;
line-height: 50px;
border: 3px solid black;
text-align: center;
background-color: black;
color: wheat;
overflow: hidden;
}

/*
#slide1, #slide2, #slide3, #slide4, #slide5{
display: none;
}
*/

@keyframes show{
0%{
opacity: 0.0;
}
100%{
opacity: 1.0;
}
}

@keyframes shake {
0% {
position: absolute;
background-color: black;
color: white;
left: 0px;
}
25%{
background-color: black;
color: white;
left: -300px;
}
50% {
background-color:white;
color: black;
left: 300px;
}
100% {
background-color: black;
color: wheat;
left: 0px;
}

}

@keyframes zoom {
0%{
background-color: black;
color: white;
left: 145px;
top: 45px;
width: 0px;
height: 0px;
font-size: 9pt;
overflow: hidden;
}
50%{
background-color: white;
color: black;
left: 0px;
top: 0px;
width: 300px;
height: 150px;
font-size: 20pt;
overflow: hidden;
}
100%{
background-color: black;
color: wheat;
left: 0px;
}
}

@keyframes flip{
0%{
background-color: black;
color: black;
opacity: 1.0;
overflow: hidden;
}
50%{
background-color: white;
color: white;
opacity: 1.0;
width: 1px;
left: 150px;
overflow: hidden;
}
100%{
opacity: 1.0;
background-color: black;
}
}

.hide{
display: none;
}
.show{
position: absolute;
top: 0px;
left: 0px;
width: 300px;
height: 100px;
text-align: center;
display: block;
animation-name: flip;
animation-duration: 3s;
}

JS Codes: Name:- effecto.js

// Effectto is a javascript function
function Effectto(slider,duration,amin,animTime){
// Variable Initializations
// We can modify here.

var sliderId = slider || 'slider';
var current = 1;
var time = duration || 5;
var effect = amin || 'show';
var effectTime = animTime || '1s';
var prevId = 'prev';
var nextId = 'next';
////////////////////////////////////////////
// Total No of Slides And Button Id Initializations
var count = document.getElementById(sliderId).childElementCount;

var prev = document.getElementById(prevId);
var next = document.getElementById(nextId);
////////////////////////////////////////

// Fuction Creation and Event Handleing

prev.addEventListener('click',prevAction);
next.addEventListener('click',nextAction);

function hideAll(){
for(var i = 1; i<=count;i++){
  var id = 'slide'+i;
  var slide = document.getElementById(sliderId).children[i-1];
  slide.className = 'hide';
 }
}

function show(no,name,duretion){
   hideAll();
   var slide = document.getElementById(sliderId).children[no-1];
   slide.className = 'show';
   slide.style.animationName = name;
   slide.style.animationDuration = duretion;
}

function prevAction(){
  if(current<=1){
    current = count;
  }else{
    current--;
  }
  show(current,effect,effectTime);
}

function nextAction(){
  if(current>=count){
    current = 1;
  }else{
    current++;
  }
  show(current,effect,effectTime);
}

// First Time Init
show(current,effect,effectTime);

// Auto Slide Mode
setInterval(function auto(){
  if(current>=count){
    current = 1;
  }else{
    current++;
  }
  show(current,effect,effectTime);
},(1000*time));

//console.log(count);
//var slide = document.getElementById("slider");
//
console.log(sliderId);
//console.log(current);

};

This is all codes for using

Shibaji Debnath

Ex Google Software Developer and Instructor

+91-8981009499

Youtube Facebook LinkedIn Github

Book for Demo Session

Students Feedbacks

Shibaji has recently helped me to customize my website and I found him to b...

Paul Sweeney, CEO, APS Legal

E-Commerce Website Development

He is really a good teacher. Always ready to help, very experienced and kno...

Paromita Roy

MEAN Stack Development

Shibaji's course of Professional Training for Web Development is comprehensive and to the point He k...

Biplab Ghose

Software Development