I have a problem I have made a slick slider which works on mouse wheel but here is 2 problem 1st one is I want that when I reaches it section I want that my window get stopped and my slick slider on mouse wheel would be start and I am not getting it and the 2nd problem is I have make a slick slider on mouse wheel but when I have reached the length of slick slider I am unable to scroll my window I want when my slick slider length gets finished so my window get starts to scroll.
First one fixed my main section so user could be able to know that here is the slick slider
and second when slick length gets finished on mouse down so my window scrolling gets start similarly on mouse up.
<div class="fix-marque-main">
<!-- Some other divs may be present here -->
<!-- Slick slider section -->
<div class="">
<div class="slick-title">
<div class="cols">
<p>
Come visit our team at the Burbank, CA showroom to discuss your next project
</p>
</div>
<div class="cols">
<p>
Bring or mail us the product you need packaged
</p>
</div>
<div class="cols">
<p>
A custom dieline and a CAD cut sample can be made and returned within 24-48 hours
</p>
</div>
</div>
</div>
</div>
$(document).ready(function () {
let blockTimeout = null;
let allowScrollDown = false;
let sliderInitialized = false;
if (!sliderInitialized) {
$(".slick-title").slick({
slidesToShow: 1.3,
infinite: false,
dots: false,
arrows: false,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 1,
},
},
],
});
sliderInitialized = true;
}
// Add mouse wheel functionality to the slick slider
// Getting the length of the slick slider
var item_length = $('.slick-title > div').length;
console.log(item_length);
$(".slick-title").on("mousewheel DOMMouseScroll wheel", function mouseWheel(e) {
var deltaY = e.originalEvent.deltaY;
e.preventDefault();
e.stopPropagation();
clearTimeout(blockTimeout);
blockTimeout = setTimeout(function () {
blocked = false;
}, 50);
if (
(deltaY > 0 && !$(".slick-title").slick("slickNext")) ||
(deltaY < 0 && !$(".slick-title").slick("slickPrev"))
) {
$(".slick-title").off("mousewheel DOMMouseScroll wheel");
if (allowScrollDown && deltaY > 0) {
console.log("allow");
return;
}
} else if (deltaY > 0) {
$(".slick-title").slick("slickNext");
console.log(item_length);
} else {
$(".slick-title").slick("slickPrev");
console.log(item_length);
}
var index = $(".slick-title").slick("slickCurrentSlide");
console.log(index, "check");
});
});
$(document).ready(function () {
let blockTimeout = null;
let allowScrollDown = false;
let sliderInitialized = false;
if (!sliderInitialized) {
$(".slick-title").slick({
slidesToShow: 1.3,
infinite: false,
dots: false,
arrows: false,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 1,
},
},
],
});
sliderInitialized = true;
}
// Add mouse wheel functionality to the slick slider
// Getting the length of the slick slider
var item_length = $('.slick-title > div').length;
console.log(item_length);
$(".slick-title").on("mousewheel DOMMouseScroll wheel", function mouseWheel(e) {
var deltaY = e.originalEvent.deltaY;
e.preventDefault();
e.stopPropagation();
clearTimeout(blockTimeout);
blockTimeout = setTimeout(function () {
blocked = false;
}, 50);
if (
(deltaY > 0 && !$(".slick-title").slick("slickNext")) ||
(deltaY < 0 && !$(".slick-title").slick("slickPrev"))
) {
$(".slick-title").off("mousewheel DOMMouseScroll wheel");
if (allowScrollDown && deltaY > 0) {
console.log("allow");
return;
}
} else if (deltaY > 0) {
$(".slick-title").slick("slickNext");
console.log(item_length);
} else {
$(".slick-title").slick("slickPrev");
console.log(item_length);
}
var index = $(".slick-title").slick("slickCurrentSlide");
console.log(index, "check");
});
});
I have try to stopped it but not fixing this problem. and also try to fix my main section fix-marque-main.
keep it in mind that this is present in center of container