Vertical Bootstrap Carousel on mouse scroll - to occur after scrolling for a while

问题

I want the bootstrap carousel to slide vertically up/down only when the mouse scrolls up/down for about 50px. How can I achieve this?

here's my HTML file :-

<!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>

I've included my CSS file as well :-

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

here's my directory structure :-

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

The carousel slides on a slight touch - which I don't want to happen, instead the images should change after scrolling up/down for a while. How do I achieve this? Thanks in advance.

回答1:

In css design file can you add mouseWheel: true; and check if it is giving out desired reuslt like following.

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

来源：https://stackoverflow.com/questions/47413127/vertical-bootstrap-carousel-on-mouse-scroll-to-occur-after-scrolling-for-a-whi

标签

bootstrap-carousel