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
