关于swiper的两种用法(swiper@4.0.7 vue-awesome-swiper@3.1.3）

一.使用swiper(slide切换)

====>html

<div class="swiper-container">

    <div class="swiper-wrapper">

       <div class="swiper-slide">slider1</div>

       <div class="swiper-slide">slider2</div>

        <div class="swiper-slide">slider3</div>

        <div class="swiper-slide">slider4</div>

        <div class="swiper-slide">slider5</div>

    </div>

</div>

====>js

import Swiper from "swiper";

import "swiper/dist/css/swiper.css";

components: {

  Swiper,

},

mounted() {

    Let a = new Swiper(".swiper-container", {

        speed: 500,

        pagination: {

        el: ".swiper-pagination",

        },

        paginationClickable: true,

        loop: true,

        autoplay: true,

        observer: true, //修改swiper自己或子元素时，自动初始化swiper

        observeParents: true,

        effect: "slide",

    });

} 

二.使用vue-awesome-swiper

====>html
<swiper :options="swiperOption" ref="mySwiper">
    <swiper-slide> 1 </swiper-slide>
    <swiper-slide> 2 </swiper-slide>
    <swiper-slide> 3 </swiper-slide>
    <swiper-slide> 4 </swiper-slide>
    <swiper-slide> 5 </swiper-slide>
</swiper>

====>js
全局引入
import  VueAwesomeSwiper  from  'vue-awesome-swiper'
import  'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper )

局部引入
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
components: {
    swiper,
    swiperSlide,
},

data() {
    return {
        swiperOption: {},
    };
},
computed: {
    swiper() {
        return this.$refs.mySwiper.swiper;
    },
},
mounted() {
    this.swiperOption = {
        autoplay: {
            delay: 1500, //自动切换的时间间隔，单位ms
            stopOnLastSlide: false, //当切换到最后一个slide时停止自动切换
            stopOnLastSlide: false, //如果设置为true，当切换到最后一个slide时停止自动切换。
            disableOnInteraction: true, //用户操作swiper之后，是否禁止autoplay。
            reverseDirection: false, //开启反向自动轮播。
            waitForTransition: true, //等待过渡完毕。自动切换会在slide过渡完毕后才开始计时。
        },
        effect: "slide",
        loop: true,
        slidesPerView: "auto",
    };
},

二.swiper滑动模式范例

——coverflow

 

swiperOption: {

effect: "coverflow",

loop: true,

autoplay: {

delay: 1000, //停留时长

stopOnLastSlide: false, //如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）

disableOnInteraction: false, //用户操作swiper之后，是否禁止autoplay。默认为true：停止。

},

centeredSlides: true, //居中幻灯片。设定为true时，当前的active slide 会居中，而不是默认状态下的居左。

slidesPerView: "auto", //设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为数字（可为小数，小数不可loop），或者 'auto'则自动根据slides的宽度来设定数量。

coverflowEffect: {

rotate: 0, //slide做3d旋转时Y轴的旋转角度

stretch: -100, //每个slide之间的拉伸值，越大slide靠得越紧。5.3.6 后可使用%百分比

depth: 300, //slide的位置深度。值越大z轴距离越远，看起来越小。

modifier: 1, //depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。

slideShadows: false, //是否开启slide阴影

},

},