horizontal slider on scroll

In this example below you will see how to do a horizontal slider on scroll with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by alojzije, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright alojzije ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<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>

/*Downloaded from https://www.codeseek.co/alojzije/horizontal-slider-on-scroll-ABCla */
.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; }




/*Downloaded from https://www.codeseek.co/alojzije/horizontal-slider-on-scroll-ABCla */
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});             
});

Comments