Horizontal slider on scroll
What is a horizontal slider on scroll How do you make a horizontal slider on scroll? This script and codes were developed by Mirjamsk on 01 April 2022, Friday.
How do I make an horizontal slider on scroll?Horizontal slider on scroll Previews
Horizontal slider on scroll HTML Codes
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>horizontal slider on scroll</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_horizontal"></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-->
<!-- spacers, only for demonstration purposes, to be removed -->
<div class="spacer_vertical"></div>
<div class="spacer_horizontal"></div>
<!-- the 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='https://raw.githubusercontent.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
Horizontal slider on scroll 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;
}
#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: white; }
Horizontal slider on scroll JS Codes
var activeSlideNo = 0; // keep track of the current slide nb
var lastSlideNo = 0; // number of slides
function slide(direction){
//do not animate it an animation is already in motion
if ($('.holder').is(':animated')) return;
// do not animate backwards if at beginning
if ( direction > 0 && activeSlideNo == 0 ) return;
//do not animate forward if at the end
if ( direction < 0 && activeSlideNo == lastSlideNo) return;
(direction > 0) ? slide_left(): slide_right();
}
function slide_left(){
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(){
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 = -2;
var iterID = setInterval(function(){
if (++i != 0 ) slide(i);
if (i > 2) window.clearInterval(iterID); },3000);
}
$(document).ready(function() {
lastSlideNo = $('#holder').children().length - 1;
$('.shower').on('mousewheel', function(event) {
slide(event.deltaY);
});
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});
});
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.