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?
  1. Horizontal slider on scroll Previews
  2. Horizontal slider on scroll HTML Codes
  3. Horizontal slider on scroll CSS Codes
  4. Horizontal slider on scroll JS Codes
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.
HIDE NOW!