如何在上下两个方向上滑动滑块的最后一次滑动后继续滚动页面？
How to continue scrolling the page after the last slide of the slick slider in the both direction up and down?
我有一个光滑的滑块，当用户到达滑块部分时，它会在鼠标滚动上滑动，但在滚动所有幻灯片后，滑块卡在该位置并且不允许用户转到任何一侧像上下一样的页面。我想让用户在完成滑块后继续他的页面之旅到其他部分，如滑块的上部或滑块的底部。任何人对问题的任何建议或更正，并允许用户在完成幻灯片后继续页面滚动。我尝试了一些解决方案，但在所有解决方案中都存在相同的问题，或者我想念一些东西。
如果您有任何示例或建议，请发表评论。我很感激你。
这是 js fiddle link 来尝试一些
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');
}
}));
我认为解决方案是在 wheel 事件期间检查是否已到达滑块的末端。一种方法是将 .slick-current 元素的索引与光滑元素的数量进行比较。
提示：您可能还需要检查滑块是否已经完全可见，否则滑块可能滚动得太早。
我已经添加了对页面多滑块的支持，并处理了评论的问题。
$(document).ready(function() {
const slider = $('.slider');
function onSliderAfterChange(event, slick, currentSlide) {
$(event.target).data('current-slide', currentSlide);
}
function onSliderWheel(e) {
var deltaY = e.originalEvent.deltaY,
$currentSlider = $(e.currentTarget),
currentSlickIndex = $currentSlider.data('current-slide') || 0;
if (
// check when you scroll up
(deltaY < 0 && currentSlickIndex == 0) ||
// check when you scroll down
(deltaY > 0 && currentSlickIndex == $currentSlider.data('slider-length') - 1)
) {
return;
}
e.preventDefault();
if (e.originalEvent.deltaY < 0) {
$currentSlider.slick('slickPrev');
} else {
$currentSlider.slick('slickNext');
}
}
slider.each(function(index, element) {
var $element = $(element);
// set the length of children in each loop
// but the better way for performance is to set this data attribute on the div.slider in the markup
$element.data('slider-length', $element.children().length);
})
.slick({
infinite: false,
slidesToShow: 1,
slidesToScroll: 1,
dots: false,
arrows: false
})
.on('afterChange', onSliderAfterChange)
.on('wheel', onSliderWheel);
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="width: 100%">
<div style="height: 500px; background-color: #aaa"></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 style="height: 500px; background-color: #ccc"></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>
我有一个光滑的滑块，当用户到达滑块部分时，它会在鼠标滚动上滑动，但在滚动所有幻灯片后，滑块卡在该位置并且不允许用户转到任何一侧像上下一样的页面。我想让用户在完成滑块后继续他的页面之旅到其他部分，如滑块的上部或滑块的底部。任何人对问题的任何建议或更正，并允许用户在完成幻灯片后继续页面滚动。我尝试了一些解决方案，但在所有解决方案中都存在相同的问题，或者我想念一些东西。 如果您有任何示例或建议，请发表评论。我很感激你。
这是 js fiddle link 来尝试一些 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');
}
}));
我认为解决方案是在 wheel 事件期间检查是否已到达滑块的末端。一种方法是将 .slick-current 元素的索引与光滑元素的数量进行比较。
提示：您可能还需要检查滑块是否已经完全可见，否则滑块可能滚动得太早。
我已经添加了对页面多滑块的支持，并处理了评论的问题。
$(document).ready(function() {
const slider = $('.slider');
function onSliderAfterChange(event, slick, currentSlide) {
$(event.target).data('current-slide', currentSlide);
}
function onSliderWheel(e) {
var deltaY = e.originalEvent.deltaY,
$currentSlider = $(e.currentTarget),
currentSlickIndex = $currentSlider.data('current-slide') || 0;
if (
// check when you scroll up
(deltaY < 0 && currentSlickIndex == 0) ||
// check when you scroll down
(deltaY > 0 && currentSlickIndex == $currentSlider.data('slider-length') - 1)
) {
return;
}
e.preventDefault();
if (e.originalEvent.deltaY < 0) {
$currentSlider.slick('slickPrev');
} else {
$currentSlider.slick('slickNext');
}
}
slider.each(function(index, element) {
var $element = $(element);
// set the length of children in each loop
// but the better way for performance is to set this data attribute on the div.slider in the markup
$element.data('slider-length', $element.children().length);
})
.slick({
infinite: false,
slidesToShow: 1,
slidesToScroll: 1,
dots: false,
arrows: false
})
.on('afterChange', onSliderAfterChange)
.on('wheel', onSliderWheel);
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="width: 100%">
<div style="height: 500px; background-color: #aaa"></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 style="height: 500px; background-color: #ccc"></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>