【发布时间】：2020-07-17 04:21:27
【问题描述】：
我有一个光滑的滑块，当用户到达滑块部分时，它会在鼠标滚动时滑动，但是在滚动所有幻灯片后，滑块卡在该位置并且不允许用户转到页面的任何一侧，例如上下边。我想允许用户在完成滑块后继续他的页面旅程到其他部分，如滑块的上部或滑块的底部。任何人对问题的任何建议或更正，并允许用户在完成幻灯片后继续滚动页面。我尝试了一些解决方案，但在所有解决方案中都存在相同的问题，或者我想念一些东西。 如果您有任何示例或建议，请发表评论。我很感激你。
这里是 js fiddle 链接来尝试一些 js fiddle
<div>
<p>Scroll down</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
</div>
<div class="slider">
<div class="slider-in">
<img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg" />
</div>
<div class="slider-in">
<img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg" />
</div>
<div class="slider-in">
<img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg" />
</div>
</div>
<div>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>Scroll up</p>
</div>
.main-slider {
width:100%;
box-sizing: borde-box;
}
.main-slider img {
width:100%;
}
/* Slider */
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
const slider = $(".main-slider");
slider
.slick({
slidesToShow: 1,
slidesToScroll: 1,
dots: false,
arrows:false
});
slider.on('wheel', (function(e) {
e.preventDefault();
if (e.originalEvent.deltaY < 0) {
$(this).slick('slickPrev');
} else {
$(this).slick('slickNext');
}
}));
【问题讨论】：
-
没有
slider.on('wheel', ...函数也可以正常工作。用户仍然可以横向滑动查看所有图片。 -
感谢您的建议，但我想让用户只在滚动时滑动，而不是通过鼠标左右滑动来滑动。你对此有什么想法吗？
标签： javascript html jquery css slick.js