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 […]

Shibaji Debnath

How To Create Custom Slider with Custom JavaScript

Custom Slider with 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>Code language: HTML, XML (xml)

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;
}Code language: CSS (css)

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

  1. hide state for HTML  slide elements.
  2. 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();Code language: JavaScript (javascript)

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));Code language: JavaScript (javascript)

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;
}
}Code language: CSS (css)

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>Code language: HTML, XML (xml)

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;
}Code language: CSS (css)

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

};Code language: JavaScript (javascript)

This is all codes for using

10% Off

New Year Offer

Will be expaired On

Book Your Seat, Now!

© Copyright By Shibaji Debnath, Website Since 2014-2023.

Call

Signup for Free Online Training Material

If you want to get some free PDF Books and Videos. Subscribe now.

Name is required.

Email is required.

Enter a proper mobile no.

Thanks, You will be get email confirmation shortly.