Issue
I have a slick-slider that are slide on mouse scroll when user reaches to slider section, but after scrolling all the slides the slider stuck at that position and don't allow the user to go to any side of the page like up and down side. I want to allow user after completing slider to continue his page journey to other section like upper sections of the sliders or bottom sections of the slider. Any one any suggestion or correction for problem and allow user to continue to page scroll after completing the slides. I try some solution but in all solutions there are same problems or I miss understand something. If you have any example or suggestion then please comment down. I am grateful for you.
and here is the js fiddle link to try out some 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');
}
}));
Solution
I think the solution would be to check during the wheel
event whether the end of the slider has been reached. One way would be to compare the index of the .slick-current
element with the amount of slick elements.
Just a hint: You may also want to check if the slider is already fully visible, otherwise the slider may scroll too early.
I've added the support for multiple sliders on the page and handled the problem of the comment.
$(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>
Answered By - UfguFugullu
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.