提问人:Muhammad Sameer 提问时间:9/27/2023 更新时间:9/27/2023 访问量:60
“如何启用光滑的滑块鼠标滚轮滚动并修复滚动上的部分位置?”
"How to Enable Slick Slider Mousewheel Scroll and Fix Section Position on Scroll?"
问:
我有一个问题,我做了一个光滑的滑块,可以在鼠标滚轮上工作,但这里有 2 个问题,第一个是我希望当我到达它部分时,我希望我的窗口停止,我的滑块在鼠标滚轮上会启动,我没有得到它,第二个问题是我在鼠标滚轮上做了一个光滑的滑块,但当我达到长度时当我光滑的滑块长度完成时,我无法滚动我想要的窗口,所以我的窗口开始滚动。 第一个修复了我的主要部分,因此用户可以知道这是光滑的滑块 其次,当鼠标向下完成光滑长度时,我的窗口滚动在鼠标向上时以类似方式开始。
<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");
});
});
我试图阻止它,但没有解决这个问题。并尝试修复我的主要部分.
请记住,它存在于容器的中心fix-marque-main
答: 暂无答案
评论