0

我希望引导轮播仅在鼠标向上/向下滚动约 50 像素时垂直向上/向下滑动。我怎样才能做到这一点？

这是我的 HTML 文件：-

<!DOCTYPE html>
<html>
<head>
    <title>Carousel</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link rel="stylesheet" type="text/css" href="style.css">

    <script>
        $(document).ready(function(){
        // invoke the carousel
            $('#imageCarousel').carousel(
            {
                interval: false
            });

        // scroll slides on mouse scroll 
            $('#imageCarousel').bind('mousewheel DOMMouseScroll', function(e) {
                if(e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) 
                {
                    $(this).carousel('prev');
                }
                else
                {
                    $(this).carousel('next');
                }
            });
        });
    </script>
</head>
<body>
    <h1>This is Archi</h1>
    <div class="container archiImage">
        <div class="row">
            <div class="col-md-8 col-md-offset-4">
                <div id="imageCarousel" class="carousel slide vertical" data-wrap="false" data-pause="false" data-interval="4000" data-ride="carousel">
                    <div class="carousel-inner">

                        <div class="item active">
                            <img src="./images/1.png" class="img-responsive" alt="firstImage">
                            <div class="carousel-caption">
                                <p>Pay friend - <span>Zahra Abdulla</span></p>
                            </div>
                        </div>

                        <div class="item">
                            <img src="./images/2.png" class="img-responsive" alt="secondImage">
                            <div class="carousel-caption">
                                <p>Split Payment - <span>Zahra Abdulla</span></p>
                            </div>
                        </div>

                        <div class="item">
                            <img src="./images/3.png" class="img-responsive" alt="thirdImage">
                            <div class="carousel-caption">
                                <p>Cash Out - <span>Zahra Abdulla</span></p>
                            </div>
                        </div>

                        <div class="item">
                            <img src="./images/4.png" class="img-responsive" alt="fourthImage">
                            <div class="carousel-caption">
                                <p>Spending Money Out - <span>Zahra Abdulla</span></p>
                            </div>
                        </div>

                        <div class="item">
                            <img src="./images/5.png" class="img-responsive" alt="fifthImage">
                            <div class="carousel-caption">
                                <p>Pay bill - <span>Zahra Abdulla</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <p>deugijfvfsgdbhtfyjgufsty</p><br>
    <p>deugijfvfsgdbhtfyjgufsty</p><br>
    <p>deugijfvfsgdbhtfyjgufsty</p><br>
    <p>deugijfvfsgdbhtfyjgufsty</p><br>
    <p>deugijfvfsgdbhtfyjgufsty</p><br>
    <p>deugijfvfsgdbhtfyjgufsty</p><br>
    <p>deugijfvfsgdbhtfyjgufsty</p><br>
    <p>deugijfvfsgdbhtfyjgufsty</p><br>
    <p>deugijfvfsgdbhtfyjgufsty</p><br>
    <p>deugijfvfsgdbhtfyjgufsty</p><br>
    <p>deugijfvfsgdbhtfyjgufsty</p><br>
    <p>deugijfvfsgdbhtfyjgufsty</p><br>
    <p>deugijfvfsgdbhtfyjgufsty</p><br>
    <p>deugijfvfsgdbhtfyjgufsty</p><br>
    <p>deugijfvfsgdbhtfyjgufsty</p><br>
    <p>deugijfvfsgdbhtfyjgufsty</p><br>
    <p>deugijfvfsgdbhtfyjgufsty</p><br>
    <p>deugijfvfsgdbhtfyjgufsty</p><br>
    <p>deugijfvfsgdbhtfyjgufsty</p><br>
    <p>deugijfvfsgdbhtfyjgufsty</p><br>
    <p>deugijfvfsgdbhtfyjgufsty</p><br>
    <p>deugijfvfsgdbhtfyjgufsty</p><br>
    <p>deugijfvfsgdbhtfyjgufsty</p><br>
    <p>deugijfvfsgdbhtfyjgufsty</p><br>
    <p>deugijfvfsgdbhtfyjgufsty</p><br>
    <p>deugijfvfsgdbhtfyjgufsty</p><br>
</body>
</html>

我也包含了我的 CSS 文件：-

img {
    height: 500px;
    width: 300px;
}
.archiImage {
    position: fixed;
    top: 0;
}



.vertical .carousel-inner {
  height: 100%;
}

.carousel.vertical .item {
  -webkit-transition: 0.6s ease-in-out top;
     -moz-transition: 0.6s ease-in-out top;
      -ms-transition: 0.6s ease-in-out top;
       -o-transition: 0.6s ease-in-out top;
          transition: 0.6s ease-in-out top;
}

.carousel.vertical .active {
  top: 0;
}

.carousel.vertical .next {
  top: 400px;
}

.carousel.vertical .prev {
  top: -400px;
}

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

.carousel.vertical .active.left {
  top: -400px;
}

.carousel.vertical .active.right {
  top: 400px;
}

.carousel.vertical .item {
    left: 0;
}

这是我的目录结构：-

Carousel
 -images
  -1.png
  -2.png
  -3.png
  -4.png
  -5.png
 -index.html
 -style.css

旋转木马轻轻滑动 - 我不希望发生这种情况，而是图像应该在向上/向下滚动一段时间后改变。我如何实现这一目标？提前致谢。

4

1 回答 1

0

在 css 设计文件中，您可以添加mouseWheel: true;并检查它是否给出了所需的结果，如下所示。

.carousel.vertical .item 
{
    left: 0;
    mouseWheel: true;
}
于 2017-11-22T05:10:11.070 回答