完整的水平页面轮播引导程序

Question

我尝试使用自动水平滚动的引导程序构建一个响应性的单页，每个鼠标滚动都将切换到下一页，我发现到目前为止最好的方法就是使用轮播。问题是我的轮播跳过了“页面”。有没有办法限制鼠标滚动事件每个滚动只移动100vw？或任何其他创意如何处理这种构建？

非常感谢任何帮助。谢谢

这是我到目前为止： https://codepen.io/xxannxx/pen/mxJWae

HTML：

      <div id="myCarousel" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
              <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
              <li data-target="#carousel-example-generic" data-slide-to="1"></li>
              <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          </ol>
          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
              <div class="item active">
                  <div class="container-fluid">
                      <div class="row">
                          <div class="col-lg-6">
                              <div class="aquamarine">
                    
                              </div><!--article end-->
                          </div><!--column end-->
                          <div class="col-lg-6">
                            <div class="blue"></div>
                          
                          </div><!--column end-->
          </div><!--row two end-->
      </div><!--container two end-->
                  <div class="carousel-caption">
                      CAPTION - information about the image
                  </div>
              </div>
              <div class="item">
                  <div class="container-fluid">
                      <div class="row">
                          <div class="col-lg-6">
                              <div class="pink">
                    
                              </div><!--article end-->
                          </div><!--column end-->
                          <div class="col-lg-6">
                            <div class="purple"></div>
                          
                          </div><!--column end-->
          </div><!--row two end-->
      </div><!--container two end-->
                  <div class="carousel-caption">
                      CAPTION - information about the image
                  </div>
              </div>
              
              <div class="item">
                  <div class="container-fluid">
                      <div class="row">
                          <div class="col-lg-6">
                              <div class="yellow">
                    
                              </div><!--article end-->
                          </div><!--column end-->
                          <div class="col-lg-6">
                            <div class="orange"></div>
                          
                          </div><!--column end-->
          </div><!--row two end-->
      </div><!--container two end-->
                  <div class="carousel-caption">
                      CAPTION - information about the image
                  </div>
              </div>
              
          </div>
<!-- Controls -->
          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
          </a>
      </div>
      </body>

的CSS：

.aquamarine {
    width: 50vw;
    height: 100vh;
    background-color: aquamarine;
}

.blue {
    width: 50vw;
    height: 100vh;
    background-color:skyblue;
}

.pink {
    width: 50vw;
    height: 100vh;
    background-color:lightpink;
}

.purple {
    width: 50vw;
    height: 100vh;
    background-color:plum;
}

.yellow {
    width: 50vw;
    height: 100vh;
    background-color:yellow;
}

.orange {
    width: 50vw;
    height: 100vh;
    background-color:orange;
}
.right.carousel-control, .left.carousel-control {
    display: none;
}

.carousel-indicators li { 
    visibility: hidden;
}

JS：

          $('#myCarousel').carousel({
              interval: false
          });
          
          
          $('#myCarousel').bind('mousewheel', function(e)
    {
        if(event.wheelDelta>0) {
            $(this).carousel('next');
        }else if(event.wheelDelta<0){
            $(this).carousel('prev');
        }
    }
);