How to Add / remove classes with next and prev button

Question

I have a webpage where divs slide in from the left while scrolling down the page. So fx when you have scrolled down to 500px a class is added to the first div making it slide in, when you scroll down to 1500px a class is added to the next div and so on. When scroll back up the classes is removed making the divs slide out to the left one by one.

I want this effect, but instead of using scroll function I want to have a "next" and "prev" button; so when clicking next the first div slides in, when clicking next again the second div slides in and so on. Does anybody know how to do this?

Here is an example of how the scroll function I use now works:

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 500) {
    $('.box_1').addClass('show');
  } else {
    $('.box_1').removeClass('show');
  }
    if (y > 1500) {
    $('.box_2').addClass('show');
  } else {
    $('.box_2').removeClass('show');
  }
      if (y > 2500) {
    $('.box_3').addClass('show');
  } else {
    $('.box_3').removeClass('show');
  }
});

body {height: 4000px;}

.box_1 {
  height: 200px;
background:red;
padding-top: 30px;
display:none;
position: fixed;
transform: translateX(-150%);
transition: transform 1s ease;
}

.box_1.show {
    transform: translateX(0);
}

.box_2 {height: 50px;
background:yellow;
padding-top: 30px;
display:none;
position: fixed;
transform: translateX(-150%);
transition: transform 1s ease;
}

.box_2.show {
    transform: translateX(0);
}
.box_3 {height: 100px;
background:green;
padding-top: 30px;
display:none;
position: fixed;
transform: translateX(-150%);
transition: transform 1s ease;
}

.box_3.show {
    transform: translateX(0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="box_1" style="display: inline-block; overflow: hidden;"><span>red box</span></li>

<li class="box_2" style="display: inline-block; overflow: hidden;"><span>yellow box</span></li>

<li class="box_3" style="display: inline-block; overflow: hidden;"><span>green box</span></li>

surely this is just what you've done already? add and remove classes but instead of checking the "y" position, add an event listener for when the "next" button is clicked and have the code you want there — L_Church

jasinth premkumar jasinth premkumar · Accepted Answer · 2018-02-12T12:53:54

just moving windows where slides is visible.

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 500) {
    $('.box_1').addClass('show');
  } else {
    $('.box_1').removeClass('show');
  }
    if (y > 1500) {
    $('.box_2').addClass('show');
  } else {
    $('.box_2').removeClass('show');
  }
      if (y > 2500) {
    $('.box_3').addClass('show');
  } else {
    $('.box_3').removeClass('show');
  }
});
$(".next").click(function(){
  var y=$(window).scrollTop();
  if(y < 500)
    $(window).scrollTop(y+501);
  if(y < 1500 && y > 500)
    $(window).scrollTop(1501);
  if(y < 2500 && y > 1500)
    $(window).scrollTop(2501);
    

});
$(".pre").click(function(){
  var y=$(window).scrollTop();
  if(y > 500&& y<1500)
    $(window).scrollTop(0);
  if(y > 1500 && y < 2500)
    $(window).scrollTop(501);
  if(y > 2500 )
    $(window).scrollTop(1501);
    

});

body {height: 4000px;}

.box_1 {
  height: 200px;
background:red;
padding-top: 30px;
display:none;
position: fixed;
transform: translateX(-150%);
transition: transform 1s ease;
}

.box_1.show {
    transform: translateX(0);
}
input{
position:fixed;
float:right;
color:red;
}

.box_2 {height: 50px;
background:yellow;
padding-top: 30px;
display:none;
position: fixed;
transform: translateX(-150%);
transition: transform 1s ease;
}

.box_2.show {
    transform: translateX(0);
}
.box_3 {height: 100px;
background:green;
padding-top: 30px;
display:none;
position: fixed;
transform: translateX(-150%);
transition: transform 1s ease;
}

.box_3.show {
    transform: translateX(0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="box_1" style="display: inline-block; overflow: hidden;"><span>red box</span></li>

<li class="box_2" style="display: inline-block; overflow: hidden;"><span>yellow box</span></li>

<li class="box_3" style="display: inline-block; overflow: hidden;"><span>green box</span></li>
<input class=pre value=previous type=button><br>
<input class=next value=next type=button>

How to Add / remove classes with next and prev button

1 Answers