horizontal slider on scroll

Tutorials of (Horizontal slider on scroll) by Mirjamsk

<!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>
/* Downloaded from https://www.codeseek.co/ */
.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/ */
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});             
});

This awesome code ( horizontal slider on scroll ) is write by mirjamsk, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © mirjamsk