随笔 - 315  文章 - 1  评论 - 12  阅读 - 24万

鼠标上下滚动控制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>
复制代码

 

 

 

 

posted on   小虾米吖~  阅读(1780)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库

点击右上角即可分享
微信分享提示