鼠标上下滚动控制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
 
                    
                 
                
            
         浙公网安备 33010602011771号
浙公网安备 33010602011771号