Прокручиваемый Bootstrap Carousel/Slider

Question

хороший день. У меня есть карусель, который скользит по вертикали. Я хочу, чтобы это контролировалось колесом мыши. Может ли кто-нибудь помочь мне в JS?

Вот наценка

$('#carousel').bind('mousewheel', function(e){$(this).carousel('next');});

<style> 
 
     <!-- html, body { 
 
      height: 100%; 
 
      padding: 0; 
 
      margin: 0; 
 
     } 
 

 
     body { 
 
      background: #fff; 
 
      min-height: 600px; 
 
     } 
 

 
      body * { 
 
       font-family: Arial, Geneva, SunSans-Regular, sans-serif; 
 
       font-size: 14px; 
 
       color: #666; 
 
       line-height: 22px; 
 
      }--> 
 

 
     #wrapper { 
 
      width: 100%; 
 
      min-width: 900px; 
 
      height: 500px; 
 
      position: relative; 
 
      left: 0; 
 
     } 
 

 
     #carousel div { 
 
      height: 100%; 
 
      float: left; 
 
     } 
 

 
     #carousel img { 
 
      min-width: 100%; 
 
      min-height: 100%; 
 
     } 
 
    </style> 
 
    <style type="text/css"> 
 
     .carousel-inner.vertical { 
 
      height: 100%; 
 
     } 
 

 
      /*.carousel .item img {*/ 
 
      /*margin: 0 auto;*/ /* Align slide image horizontally center */ 
 
      /*}*/ 
 

 
      .carousel-inner.vertical > .item { 
 
       -webkit-transition: .6s ease-in-out top; 
 
       -o-transition: .6s ease-in-out top; 
 
       transition: .6s ease-in-out top; 
 
      } 
 

 
     @media all and (transform-3d), (-webkit-transform-3d) { 
 
      .carousel-inner.vertical > .item { 
 
       -webkit-transition: -webkit-transform .6s ease-in-out; 
 
       -o-transition: -o-transform .6s ease-in-out; 
 
       transition: transform .6s ease-in-out; 
 
       -webkit-backface-visibility: hidden; 
 
       backface-visibility: hidden; 
 
       -webkit-perspective: 1000; 
 
       perspective: 1000; 
 
      } 
 

 
       .carousel-inner.vertical > .item.next, 
 
       .carousel-inner.vertical > .item.active.right { 
 
        top: 0; 
 
        -webkit-transform: translate3d(0, 100%, 0); 
 
        transform: translate3d(0, 100%, 0); 
 
       } 
 

 
       .carousel-inner.vertical > .item.prev, 
 
       .carousel-inner.vertical > .item.active.left { 
 
        top: 0; 
 
        -webkit-transform: translate3d(0, -100%, 0); 
 
        transform: translate3d(0, -100%, 0); 
 
       } 
 

 
        .carousel-inner.vertical > .item.next.left, 
 
        .carousel-inner.vertical > .item.prev.right, 
 
        .carousel-inner.vertical > .item.active { 
 
         top: 0; 
 
         -webkit-transform: translate3d(0, 0, 0); 
 
         transform: translate3d(0, 0, 0); 
 
        } 
 
     } 
 

 
     .carousel-inner.vertical > .active { 
 
      top: 0; 
 
     } 
 

 
     .carousel-inner.vertical > .next, 
 
     .carousel-inner.vertical > .prev { 
 
      top: 0; 
 
      height: 100%; 
 
      width: auto; 
 
     } 
 

 
     .carousel-inner.vertical > .next { 
 
      left: 0; 
 
      top: 100%; 
 
     } 
 

 
     .carousel-inner.vertical > .prev { 
 
      left: 0; 
 
      top: -100%; 
 
     } 
 

 
      .carousel-inner.vertical > .next.left, 
 
      .carousel-inner.vertical > .prev.right { 
 
       top: 0; 
 
      } 
 

 
     .carousel-inner.vertical > .active.left { 
 
      left: 0; 
 
      top: -100%; 
 
     } 
 

 
     .carousel-inner.vertical > .active.right { 
 
      left: 0; 
 
      top: 100%; 
 
     } 
 
    </style>

<div id="wrapper"> 
 
     <!-- wrap @img width --> 
 
     <div id="carousel" class="carousel slide" data-ride="carousel" data-interval="3000"> 
 
      <!-- Indicators --> 
 
        <ol class="carousel-indicators"> 
 
       <li data-target="#carousel" data-slide-to="0" class="active"></li> 
 
       <li data-target="#carousel" data-slide-to="1"></li> 
 
       <li data-target="#carousel" data-slide-to="2"></li> 
 
       <li data-target="#carousel" data-slide-to="3"></li> 
 
       <li data-target="#carousel" data-slide-to="4"></li> 
 
      </ol> 
 

 
      <!-- Wrapper for slides --> 
 
      <div class="carousel-inner vertical" role="listbox"> 
 
       <div class="item active"> 
 
        <img src="img/image1.jpg" alt="First Slide" /> 
 
       </div> 
 
       <div class="item"> 
 
        <img src="img/image2.jpg" alt="Second Slide" /> 
 
       </div> 
 
       <div class="item"> 
 
        <img src="img/image3.jpg" alt="Third Slide" /> 
 
       </div> 
 
       <div class="item"> 
 
        <img src="img/image4.jpg" alt="Forth Slide" /> 
 
       </div> 
 
       <div class="item"> 
 
        <img src="img/image5.jpg" alt="Fifth Slide" /> 
 
       </div> 
 
      </div> 
 

 
      <!-- Controls --> 
 
      <a class="left carousel-control" href="#carousel" 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" role="button" data-slide="next"> 
 
       <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
       <span class="sr-only">Next</span> 
 
      </a> 
 
     </div> 
 
    </div>

Пожалуйста, дайте мне какие-либо рекомендации о моей проблеме. Я попытался выполнить поиск в Google и на этом сайте, но JS не работает в моей карусели.

Пожалуйста, мне нужна ваша помощь. Заранее спасибо.

P.S. Размер изображения с использованием им в 1920 x 1020

Answer 1

Сначала добавьте прослушиватель для MouseWheel действия:

var carousel = document.getElementById("carousel"); 
if (carousel.addEventListener) { 
    // IE9, Chrome, Safari, Opera 
    carousel.addEventListener("mousewheel", MouseWheelHandler, false); 
    // Firefox 
    carousel.addEventListener("DOMMouseScroll", MouseWheelHandler, false); 
} 
// IE 6/7/8 
else carousel.attachEvent("onmousewheel", MouseWheelHandler); 

function MouseWheelHandler() { 
$('#carousel').carousel('next'); 
}