鼠标上下滚动控制swiper轮播左右滚动(很少使用到的)swiper4
<link rel="stylesheet" href="__CDN__/assets/static/css/swiper4.min.css">
<link rel="stylesheet" href="__CDN__/assets/static/css/banner.css">
<div id="swiper_scroll_cusor">
<div class="mySwiper2 w_1200 marginB_20">
<div class="swiper-container swiper-container2">
<div class="swiper-wrapper">
{notempty name="data.data"}
{foreach name="data.data" item="vo"}
<div class="swiper-slide flex">
<div class="content_box marginR_40">
<div class="title marginB_20">{$vo.title|default=''}</div>
<div class="content">{$vo.intro|default=''}</div>
</div>
<img class="img" src="{$vo.img}">
</div>
{/foreach}
{/notempty}
</div>
</div>
</div>
</div>
<script src="__CDN__/assets/static/js/swiper4.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container2', {
slidesPerView: 1,
spaceBetween: 20,
freeMode : true,
mousewheel: {
releaseOnEdges: true, //当Swiper处于边缘位置时(第一个或最后一个slide),Swiper释放鼠标滚轮事件,鼠标可以控制页面滚动,即页面正常向上或者向下滚动。
eventsTarged: '#swiper_scroll_cusor', // 鼠标在这个区域都可以控制伦比哦,不设置就只能是鼠标在1200区域内才能控制轮播
},
freeModeMomentumBounceRatio : 5, // 这个可以实现鼠标滚动时无缝连接下一屏,而不是一屏一屏轮播
mousewheelControl:true, // 滚动操作swiper
onScroll: function(swiper){
let _index = swiper.activeIndex;
}
});
$(function () {
let p, t = 0;
let $process = $(".mySwiper2");
$(window).scroll(function (e) {
p = $(this).scrollTop();
if (($(window).scrollTop() > ($process.offset().top + $process.outerHeight())) || (($(window).scrollTop() + $(window).height()) < $process.offset().top)) {
} else {
setTimeout(function () { // 页面滚动到轮播可视区域内暂停一下鼠标,否则也是无法触发的
},20);
}
setTimeout(function () {
t = p;
}, 0);
})
});
</script>
本文来自博客园,作者:小虾米吖~,转载请注明原文链接:https://www.cnblogs.com/LindaBlog/p/17040626.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库