鼠标上下滚动控制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 2023-01-10 16:14  小虾米吖~  阅读(1666)  评论(0编辑  收藏  举报