прокрутка горизонтального скролла на виличину равную ширине экрана

Подскажите, как повесить на событие прокрутку вправо, равную величине текущего экрана. У меня таких экранов пять, получилось пока только до класса прокручивать либо прокручивать до второго экрана, путём подстчёта первого. Надо наверно как то на каждое событие повесить +1 прокрутку вправо либо вынести в массив все эти 5 экранов и добавлять нулевой отступ слева от каждого по очередности. В данный момент прокручивается только 2 экрана колесом мыши:

http://nefiga.sytes.net/verstka/1/

исходник: https://dropmefiles.com/DU2p9

<div class="wrapper">
    <div class="window w1"></div>
    <div class="window w2"></div>
    <div class="window w3"></div>
    <div class="window w4"></div>
    <div class="window w5"></div>
</div>

.wrapper{
    @extend .cl;
    width: calc(100vw * 5);
    height: 100vh;
}
.window{
    float: left;
    width: 100vw;
    height: 100vh;
}
.w1{
    background: blue;
}
.w2{
    background: green;
}
.w3{
    background: orange;
}
.w4{
    background: cyan;
}
.w5{
    background: yellow;
}


$(document).ready(function() { 

//Firefox
$('html').bind('DOMMouseScroll', function(e){
     if(e.originalEvent.detail > 0) {
         //scroll down
         console.log('Down');
         // $('html').animate({scrollLeft:$('.w2').offset().left});
         $('html').animate({scrollLeft:($('.window').outerWidth())});
     }else {
         //scroll up         
         console.log('Up');
         $('html').animate({scrollLeft:$('.w1').offset().left});
     }
 });

//IE, Opera, Safari
 $('html').bind('mousewheel', function(e){
     if(e.originalEvent.wheelDelta < 0) {
         //scroll down
         console.log('Down');
         $('html').animate({scrollLeft:$('.w2').offset().left});
     }else {
         //scroll up
         console.log('Up');
         $('html').animate({scrollLeft:$('.w1').offset().left});
     }
 });

});