Horizontal slider

Developer
Mirjamsk
Size
2,672 Kb
Views
2,024
  1. Horizontal slider Previews
  2. Horizontal slider HTML Codes
  3. Horizontal slider CSS Codes
  4. Horizontal slider JS Codes

How do I make an horizontal slider?

What is a horizontal slider? How do you make a horizontal slider? This script and codes were developed by Mirjamsk on 26 January 2023, Thursday.

Horizontal slider Previews
IQ Test

Horizontal slider - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>horizontal slider</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- spacers, only for demonstration purposes, to be removed -->
<div class="spacer_vertical"></div>
<div class="spacer_vertical"></div>
<div class="spacer_horizontal"></div>
<div class="arrow" id="arrow_left">&#65513;</div>
<!-- the slider clean-->
<div class="shower"> <div class="holder" id="holder"> <div class="slide" id="slide-0"></div> <div class="slide" id="slide-1"></div> <div class="slide" id="slide-2"></div> </div>
</div>
<!-- end of slider clean-->
<div class="arrow" id="arrow_right"> &#65515; </div>
<!-- spacers, only for demonstration purposes, to be removed -->
<div class="spacer_vertical"></div>
<div class="spacer_horizontal"></div>
<!-- lower slider embelished for demonstration purposes-->
<div class="shower demonstr"> <div class="holder demonstr"> <div class="slide" id="slide-0"></div> <div class="slide" id="slide-1"></div> <div class="slide" id="slide-2"></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Horizontal slider - Script Codes CSS Codes

.shower{ float: left; width: 5vw; /* change HERE desired height and width */ height: 5vw; /* the rest will be scaled accordingly */ overflow: hidden;
}
.holder { width: 300%; /* change width HERE: width = 100% * nb_of_slides */ height: 100%;
}
.slide { float: left; width: 33.33%; height: 100%; opacity: 0.4;
}
.arrow{ float: left; font-size: 4vw;
}
#arrow_left{ margin-left: -2vw; }
#slide-0{ background-color: purple; }
#slide-1{ background-color: teal; }
#slide-2{ background-color: red; }
.shower.demonstr{ overflow: visible; border: 4px solid black;
}
.spacer_horizontal{ float: left; width: 40vw; height: 5vw;
}
.spacer_vertical{ float: left; width: 99vw; height: 5vh;
}
body{ background-color: #fff;}

Horizontal slider - Script Codes JS Codes

var activeSlideNo = 0; // keep track of the current slide nb
var lastSlideNo = 0; // number of slides
function slide_left(){ if ($('.holder').is(':animated')) return; //do not animate it an animation is already in motion if ( activeSlideNo == 0 ) return; //do not animate backwards if at beginning activeSlideNo -= 1; //keep track of the current slide nb $('.holder').stop().animate( //animate! {'margin-left': "+=" + $('.slide').width()}, 1000); $('.holder_demonstr').stop().animate( //demonstration animation {'margin-left': "+=" + $('.slide').width()}, 1000);
}
function slide_right(){ if ($('.holder').is(':animated')) return; //do not animate it an animation is already in motion if ( activeSlideNo == lastSlideNo ) return;	//do not animate forward if at the end activeSlideNo += 1; //keep track of the current slide nb $('.holder').stop().animate( //animate! {'margin-left': "-=" + $('.slide').width()}, 1000); $('.holder_demonstr').stop().animate( //demonstration animation {'margin-left': "-=" + $('.slide').width()}, 1000);
}
function quick_demo(){ var i = -1; var iterID = setInterval(function(){ i++ < 1? slide_right() : slide_left(); if (i > 2) window.clearInterval(iterID); },3000);
}
$(document).ready(function() { lastSlideNo = $('#holder').children().length - 1; $('#arrow_left').click(function(){	slide_left(); }); $('#arrow_right').click(function(){	slide_right(); }); quick_demo();
});
//on resize, recalibrate margin to point to desired (current) slide
$(window).resize(function() { $('.holder').css({ marginLeft : -1 * activeSlideNo * $('.slide').width()}); $('.holder_demonstr').css({ marginLeft : -1 * activeSlideNo * $('.slide').width() -3});
});
Horizontal slider - Script Codes
Horizontal slider - Script Codes
Home Page Home
Developer Mirjamsk
Username alojzije
Uploaded January 26, 2023
Rating 3
Size 2,672 Kb
Views 2,024
Do you need developer help for Horizontal slider?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mirjamsk (alojzije) Script Codes
Name
Visualize DNA using chaos game
Gravity simulation
Search it
Materialize pagination
Horizontal slider on scroll
Connect html elements with SVG path
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!