swiper pc端要添加几项配置移动端的时候不需要,怎么处理?


var indexSwiper = new Swiper('#swiper-live', {
            loop: true,
            autoplay: {
                delay: 30000000
            },
            // initialSlide: 0,
            // centeredSlides: true,
            // slidesPerView: 'auto',
            // spaceBetween: 25,
    
            navigation: {
                nextEl: '.swiper-next-vlog',
                prevEl: '.swiper-prev-vlog',
            },
            observer:true,
            observeParents:true,
            observeSlideChildren:true
            
        })

注释的那段pc的时候加上去!


if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    // 移动端的配置 
} else {
    // PC端的配置
    indexSwiper.params.centeredSlides = true;
    indexSwiper.params.slidesPerView = 'auto';
    indexSwiper.params.spaceBetween = 25;
}

如果是移动端,你判断一下是否为移动端,是移动端你就重新初始化swiper撒(重新挂载swiper)

参考代码:

let swiperObj = {
    loop: true,
    autoplay: {
        delay: 30000000
    },
    navigation: {
        nextEl: '.swiper-next-vlog',
        prevEl: '.swiper-prev-vlog',
    },
    observer:true,
    observeParents:true,
    observeSlideChildren:true
}
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))){
    //手机
} else{
    //电脑
    swiperObj.initialSlide: 0,
    swiperObj.centeredSlides: true,
    swiperObj.slidesPerView: 'auto',
    swiperObj.spaceBetween: 25,
}
var indexSwiper = new Swiper('#swiper-live', swiperObj);