鼠标滚动时的垂直Bootstrap传送带-滚动一段时间后发生 [英] Vertical Bootstrap Carousel on mouse scroll - to occur after scrolling for a while
本文介绍了鼠标滚动时的垂直Bootstrap传送带-滚动一段时间后发生的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我希望自举轮播仅在鼠标向上/向下滚动约50px时垂直向上/向下滑动。我该如何实现？
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?
这是我的HTML文件：-
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>
我也包括了我的CSS文件：-
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;
}
这是我的目录结构：-
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.
推荐答案
在CSS设计文件中可以添加 mouseWheel：true; 并检查是否按如下所示进行了重用。
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;
}
这篇关于鼠标滚动时的垂直Bootstrap传送带-滚动一段时间后发生的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
