jQuery vertical slider keep sliding

Question

I have created a vertical content slider and it will slide up/down using mousewheel, but its not working as expected, Its start scrolling and keep scrolling...

It should display one slide in each scroll.

EDIT: In each scroll it should display like Slider Heading 1 and then next scroll will show Slider Heading 2

Here is the JSfiddle Demo

$(document).ready(function($) {

  var slideCount = $('.portfolio-slider > ul > li').length;
  var slideWidth = $('.portfolio-slider > ul > li').width();
  var slideHeight = $('.portfolio-slider > ul > li').height();
  var sliderUlWidth = slideCount * slideHeight;

  $('.portfolio-slider').css({
    width: slideWidth,
    height: slideHeight
  });
  $('.portfolio-slider > ul').css({
    width: sliderUlWidth,
    top: -slideHeight
  });
  $('.portfolio-slider > ul > li:last-child').prependTo('.portfolio-slider > ul');

  function changePortFolio() {
    $('.portfolio-slider > ul').animate({
      top: +slideHeight
    }, 1000, function() {
      $('.portfolio-slider > ul > li:last-child').prependTo('.portfolio-slider > ul');
      $('.portfolio-slider > ul').css('top', '');
    });
  };
  $('.portfolio-slider').on('mousewheel', function(event) {
    changePortFolio();
    console.log("a");
  });
});

.portfolio-slider {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
  border-radius: 4px;
}

.portfolio-slider>ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 200px;
  list-style: none;
}

.portfolio-slider>ul>li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 500px;
  height: 300px;
  background: #ccc;
  text-align: center;
  line-height: 300px;
}

.slider_option {
  position: relative;
  margin: 10px auto;
  width: 160px;
  font-size: 18px;
}

.img-block {
  float: left;
  width: 30%;
}

.img-block>img {
  width: 100%;
  height: auto;
}

.content-block {
  float: right;
  width: 70%;
  padding: 0 20px;
  box-sizing: border-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="portfolio-slider">
  <ul>
    <li>
      <div class="img-block"><img src="https://camo.mybb.com/e01de90be6012adc1b1701dba899491a9348ae79/687474703a2f2f7777772e6a71756572797363726970742e6e65742f696d616765732f53696d706c6573742d526573706f6e736976652d6a51756572792d496d6167652d4c69676874626f782d506c7567696e2d73696d706c652d6c69676874626f782e6a7067"></div>
      <div class="content-block">
        <h1>Slider Heading 1</h1>
        <p>This is content related to slider. This is content related to slider. This is content related to slider. This is content related to slider. </p>
      </div>
    </li>
    <li style="background: #aaa;">
      <div class="img-block"><img src="https://camo.mybb.com/e01de90be6012adc1b1701dba899491a9348ae79/687474703a2f2f7777772e6a71756572797363726970742e6e65742f696d616765732f53696d706c6573742d526573706f6e736976652d6a51756572792d496d6167652d4c69676874626f782d506c7567696e2d73696d706c652d6c69676874626f782e6a7067"></div>
      <div class="content-block">
        <h1>Slider Heading 2</h1>
        <p>This is content related to slider. This is content related to slider. This is content related to slider. This is content related to slider. </p>
      </div>
    </li>
  </ul>
</div>

Answer 1

The reason it is scrolling the slider multiple times, is due the scroll wheel is not uniform. I am delving into the hardware, but these are just observations. The mouse scroll has multiple pauses (I do not have the technical word for this thing), you will notice it when you will scroll the mouse slowly. You will observe there is a slight pause if you scroll slowly. So for each pause the mouse scroll event is fired. If you scroll rapidly, the scroll event is fired multiple times. It just based on the my observations.

So basically you want to scroll the image each time you scroll, no matter how many scroll pauses you have crossed.

Here is a solution, but for first scroll its firing two times (not able to figure out why). There are open question on stackoverflow already for this behaviour, but they didn't seem to work for me atlease. But for subsequent scrolls it works perfectly.

$(document).ready(function($) {

  var slideCount = $('.portfolio-slider > ul > li').length;
  var slideWidth = $('.portfolio-slider > ul > li').width();
  var slideHeight = $('.portfolio-slider > ul > li').height();
  var sliderUlWidth = slideCount * slideHeight;

  $('.portfolio-slider').css({
    width: slideWidth,
    height: slideHeight
  });
  $('.portfolio-slider > ul').css({
    width: sliderUlWidth,
    top: -slideHeight
  });
  $('.portfolio-slider > ul > li:last-child').prependTo('.portfolio-slider > ul');

  function changePortFolio() {
    $('.portfolio-slider > ul').animate({
      top: +slideHeight
    }, 1000, function() {
      $('.portfolio-slider > ul > li:last-child').prependTo('.portfolio-slider > ul');
      $('.portfolio-slider > ul').css('top', '');
    });
  };
  var scrolled = false;
  $('.portfolio-slider').on('wheel', function(event) {
    if (!scrolled) {
      scrolled = true;
      changePortFolio();
      setTimeout(function() {
        scrolled = false;
      }, 1000);
    }
  });
});

Fiddle for the same here

Answer 2

I think you need to put a .stop() before the animate. I'm not sure I understand right what you want.

$('.portfolio-slider > ul').stop().animate({
  top: +slideHeight
}, 1000, function(){

But here's a fiddle ==> https://jsfiddle.net/tonysamperi/bdv4p0a7/

Also you could check if animation and callback are done by using a variable

  $(document).ready(function($) {
    var animating = false;
    var slideCount = $('.portfolio-slider > ul > li').length;
    var slideWidth = $('.portfolio-slider > ul > li').width();
    var slideHeight = $('.portfolio-slider > ul > li').height();
    var sliderUlWidth = slideCount * slideHeight;

    $('.portfolio-slider').css({
      width: slideWidth,
      height: slideHeight
    });
    $('.portfolio-slider > ul').css({
       width: sliderUlWidth,
       top: -slideHeight
    });
    $('.portfolio-slider > ul > li:last-child').prependTo('.portfolio-slider > ul');

   function changePortFolio() {
         animating = true;
        $('.portfolio-slider > ul').animate({
            top: +slideHeight
        }, 1000, function() {
            $('.portfolio-slider > ul > li:last-child').prependTo('.portfolio-slider > ul');
            $('.portfolio-slider > ul').css('top', '');
            animating = false;
        });
  }

  $('.portfolio-slider').on('mousewheel', function(event) {
      if(animating) return false;
      changePortFolio();
      console.log("a");
  });
 });

fiddle of the second solution ==> https://jsfiddle.net/tonysamperi/g75dtff2/