Swiper的使用

一、swiper的使用

注意点：swiper的使用一定要注意版本问题，版本不同有些参数是无效的

<1>初始化swiper

{

let Swriper=new Swiper('.swiper',{ 
autoplay: {                         // 是否自动轮播
    disableOnIntrecatiion: false
},
loop：true,                         // 是否循环轮播
speed: 500,
slidesPerView: 4,                  // 一屏展示几个
spaceBetween: 12,                  // 屏与屏之间的距离里
navigation: {                      // 上一页和下一页的按钮
    nextEl: '.swriper-button-next',
    preEl: ',swripe-button-prev'
    }
 })
 this.mySwipe = mySwiper          // 用户对象的销毁

}

<2> swiper的使用幕布的使用

www.swiper.com.cn/usage/index…

<3> swiper使用的坑 a、数据更新了，dom没有实时更新 解决方法：每次数据更新的时候，销毁原有的dom的，让组件重新渲染 this.mySwiper.destroy(true); b、数据为数组对象时，不要用forEach遍历数组去改数组中对应的对象值。 ES6语法

<4>fulllScreen 参数配置

{

loop: true,
spaceBetween: -100,  
effect: "coverflow", // 该选项给Swiper用户提供小小的贴心应用，设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。
grabCursor: true, // 设定为true时，active slide会居中，而不是默认状态下的居左。
centeredSlides: true, 
slidesPerView: 2.505, 
observer: true, observeParents: true,
observeSlideChildren: true,
autoplay: {
    delay: 3000,
    stopOnLastSlide: false, // 如果设置为true，当切换到最后一个slide时停止自动切换
    disableOnInteraction: false
},
onSlideChangeEnd: ()=> {
    swiper.update();
    mySwiper.startAutoplay();
    mySwiper.reLoop();
},

// depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。
coverflowEffect：{
    rotate: 0,
    stretch: -70,
    depth: 500,
    modifier: 1,
    slideShadows: true
}

}