How To Create Custom Slider with Custom JavaScript

Custom Image Slider with 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

2 thoughts on “How To Create Custom Slider with Custom JavaScript

  1. Great help …Thanks for sharing.
    To take a deep dive into the topic, you can get in touch with Mr Shibaji Debnath for experts advice for IT Software Development Trainings.

Leave a Reply

Your email address will not be published. Required fields are marked *