如何在向上和向下两个方向上滑动滑块的最后一张幻灯片后继续滚动页面? [英] How to continue scrolling the page after the last slide of the slick slider in the both direction up and down?

查看：29 发布时间：2021/9/23 20:40:41 javascript html jquery css slick.js

本文介绍了如何在向上和向下两个方向上滑动滑块的最后一张幻灯片后继续滚动页面?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个光滑的滑块，当用户到达滑块部分时，它会在鼠标滚动上滑动，但是在滚动所有幻灯片后，滑块卡在该位置并且不允许用户转到页面的任何一侧，例如上侧和下侧.我想让用户在完成滑块后继续他的页面旅程到其他部分，如滑块的上部或滑块的底部.任何对问题的任何建议或更正，并允许用户在完成幻灯片后继续页面滚动.我尝试了一些解决方案，但在所有解决方案中都有相同的问题，或者我想念一些东西.如果您有任何示例或建议，请发表评论.我很感激你.

这是尝试一些的js小提琴链接js小提琴

 
<p>向下滚动</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 class="slider"><div class="slider-in"><img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg";/>

<div class="slider-in"><img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg";/>

$(document).ready(function() {const 滑块 = $('.slider');函数 onSliderAfterChange(event, slick, currentSlide) {$(event.target).data('current-slide', currentSlide);}功能 onSliderWheel(e) {var deltaY = e.originalEvent.deltaY,$currentSlider = $(e.currentTarget),currentSlickIndex = $currentSlider.data('current-slide') ||0;如果 (//向上滚动时检查(deltaY < 0 && currentSlickIndex == 0) ||//向下滚动时检查(deltaY > 0 && currentSlickIndex == $currentSlider.data('slider-length') - 1)){返回;}e.preventDefault();如果(e.originalEvent.deltaY <0){$currentSlider.slick('slickPrev');} 别的 {$currentSlider.slick('slickNext');}}滑块.每个(功能(索引，元素){var $element = $(element);//设置每个循环中子元素的长度//但更好的性能方法是在标记中的 div.slider 上设置此数据属性$element.data('slider-length', $element.children().length);}).slick({无限:假，幻灯片显示:1，幻灯片滚动:1，点:假，箭头:假}).on('afterChange', onSliderAfterChange).on('轮', onSliderWheel);});

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

$(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); });

如何在向上和向下两个方向上滑动滑块的最后一张幻灯片后继续滚动页面? [英] How to continue scrolling the page after the last slide of the slick slider in the both direction up and down?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

如何在向上和向下两个方向上滑动滑块的最后一张幻灯片后继续滚动页面? [英] How to continue scrolling the page after the last slide of the slick slider in the both direction up and down?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭