我目前正在建立一个垂直滚动的网站,为了实现这一目标,我正在建立整个网站的引导旋转木马,但无论我尝试什么,当我使用我的滚轮时,我无法让旋转木马移动,我有尝试使用this
没有用
我真的没有任何javascript的高级知识,因此我的问题。
提前致谢!
答案 0 :(得分:0)
How to turn Bootstrap Carousel slides to change on scroll?答案中的jQuery应该足够了。
这是一个有效的例子:
http://codepen.io/charliebeckstrand/pen/yJLNmQ
$('#carousel-example-generic').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta /120 > 0) {
$(this).carousel('next');
}
else{
$(this).carousel('prev');
}
});
答案 1 :(得分:0)
这是您要寻找的吗?
<script src="{{asset('js/app.js')}}" ></script>
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this,
args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
var slider = document.getElementById("demo");
var onScroll = debounce(function(direction) {
//console.log(direction);
if (direction == false) {
$('.carousel-control-next').click();
} else {
$('.carousel-control-prev').click();
}
}, 100, true);
slider.addEventListener("wheel", function(e) {
e.preventDefault();
var delta;
if (event.wheelDelta) {
delta = event.wheelDelta;
} else {
delta = -1 * event.deltaY;
}
onScroll(delta >= 0);
});
.carousel-item {
height: 100vh;
background: #212121;
}
.carousel-control-next,
.carousel-control-prev {
width: 8% !important;
}
.carousel-item.active,
.carousel-item-left,
.carousel-item-right {
display: flex !important;
justify-content: center;
align-items: center;
}
.carousel-item h1 {
color: #fff;
font-size: 72px;
padding: 0 10%;
}
答案 2 :(得分:0)
仅包含文本,并且垂直滚动。
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this,
args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
var slider = document.getElementById("demo");
var onScroll = debounce(function(direction) {
//console.log(direction);
if (direction == false) {
$('.carousel-control-next').click();
} else {
$('.carousel-control-prev').click();
}
}, 100, true);
slider.addEventListener("wheel", function(e) {
e.preventDefault();
var delta;
if (event.wheelDelta) {
delta = event.wheelDelta;
} else {
delta = -1 * event.deltaY;
}
onScroll(delta >= 0);
});
.carousel-item {
height: 100vh;
background: #212121;
}
.carousel-control-next,
.carousel-control-prev {
width: 8% !important;
}
.carousel-item.active,
.carousel-item-left,
.carousel-item-right {
display: flex !important;
justify-content: center;
align-items: center;
}
.carousel-item h1,
.carousel-item p {
color: #fff;
}
.carousel-item h1 {
font-size: 72px;
padding: 0 10%;
}
.verical. carousel-item-next.carousel-item-left,
.verical .carousel-item-prev.carousel-item-right {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.verical .carousel-item-next,
.verical .active.carousel-item-right {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100% 0);
}
.verical .carousel-item-prev,
.verical .active.carousel-item-left {
-webkit-transform: translate3d(0,-100%, 0);
transform: translate3d(0,-100%, 0);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div id="demo" class="carousel slide verical" data-ride="carousel" data-interval="false">
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<div>
<h1 class="display-1 text-center">Lorem ipsum dolor sit amet adipisicing</h1>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="carousel-item">
<div>
<h1 class="display-1 text-center">Inventore omnis odio, dolore culpa atque?</h1>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="carousel-item">
<div>
<h1 class="display-1 text-center">Lorem ipsum dolor sit</h1>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>