Horizontal slider on scroll
How do I make an 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 26 January 2023, Thursday.
Horizontal slider on scroll - Script Codes 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 - 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;
}
#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 - Script Codes 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});
});

Developer | Mirjamsk |
Username | alojzije |
Uploaded | January 26, 2023 |
Rating | 3 |
Size | 2,672 Kb |
Views | 2,023 |
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!
Name | Size |
Visualize DNA using chaos game | 3,971 Kb |
Materialize pagination | 2,236 Kb |
Horizontal slider | 2,672 Kb |
Gravity simulation | 4,699 Kb |
Search it | 3,338 Kb |
Connect html elements with SVG path | 4,232 Kb |
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!
Name | Username | Size |
A Pen by Final Boss tommyb9 | FBtommyb9 | 55,354 Kb |
Bezier Animation with straight paths | Rhernando | 2,087 Kb |
Ionic - Wordpress REST API starter | Superpikar | 2,961 Kb |
Ripples in water | Nobitagit | 2,704 Kb |
Svg penguin | _massimo | 2,990 Kb |
CSS Infinite 360 | APinix | 5,564 Kb |
JQuery exercise | Brian-baum | 3,780 Kb |
Emberjs Bootstrap Modal Carousel | Somethingkindawierd | 4,233 Kb |
Flex layout example | Mofny | 1,663 Kb |
A Pen by Ash | Littleginger | 2,386 Kb |
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. Hide Your IP Now!