swiper实现无限滚动轮播、左右切换

最新推荐文章于 2024-04-09 16:57:17 发布

不会水的Yu

最新推荐文章于 2024-04-09 16:57:17 发布

阅读量3.3k

点赞数 1

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/yuhaiyang11/article/details/128717533

版权

废话不多说，直接上代码

const mySwiper = ref<any>()
const data = ref<API.homeIndexList[]>([])
const lastNeedSwiperSpeed = ref<number>(0) // 平滑移动到swiper1.translate需要的速度
const ifBtn = ref<boolean>(true)//控制点击第一次的时候执行
const init = (indexList: API.homeIndexList[]) => {
    data.value = indexList
    nextTick(() => {
        mySwiper.value = new Swiper('.homeIndex-swiper-container', {
            autoplay: {
                delay: 0,
                stopOnLastSlide: false,
                disableOnInteraction: true,
            },
            speed: 8000,
            loop: true,
            slidesPerView: 4,
            slidesPerGroup: 1,
        });
        // 实现 鼠标移入swiper-container时，轮播图停止；鼠标移出时，轮播图继续
        const homeIndexId: any = document.getElementById('homeIndex-swiper-container');
        homeIndexId.onmouseenter = function () {
            lastNeedSwiperSpeed.value = Math.abs(Math.abs(mySwiper.value.getTranslate()) - Math.abs(mySwiper.value.translate)) / (mySwiper.value.width/4) * mySwiper.value.params.speed;
            // setTranslate到当前位置，并停止autoplay            
            mySwiper.value.setTranslate(mySwiper.value.getTranslate());
            mySwiper.value.autoplay.stop();
        }
        //鼠标移出滚动
        homeIndexId.onmouseleave = function () {
            mySwiper.value.slideTo(mySwiper.value.activeIndex, lastNeedSwiperSpeed.value);
            mySwiper.value.autoplay.start();
            ifBtn.value = true
        }
    })
}
const prev = ()=>{
    mySwiper.value.slideTo(mySwiper.value.activeIndex-1, 300);
}
const next = ()=>{
    if(ifBtn.value){
        mySwiper.value.slideTo(mySwiper.value.activeIndex, 300);
        ifBtn.value = false
    }else{
        mySwiper.value.slideTo(mySwiper.value.activeIndex+1, 300);
    }
    
}

欢迎讨论交流