javascript - 可滚动的 Bootstrap 旋转木马/ 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>

请给我关于我的问题的任何建议。我尝试在谷歌和本网站上进行搜索，但 JS 在我的轮播中不起作用。

我需要你的帮助。提前谢谢你。

附言我使用的图片大小是 1920 x 1020

Answer 1

首先为鼠标滚轮 Action 添加一个监听器:

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');
}