【Vue项目中使用Swiper】

目录

在vue项目中使用Swiper插件

1.安装swiper以及vue-awesome-swiper插件

2.在main.js中注册使用

①全局注册

②局部注册

3.在vue文件中使用swiper轮播图

切换效果：默认为slide 还有cube（方块)、coverflow、filp、cards、creative、fade（淡入淡出）filp是可以实现上下切换。

---

在vue项目中使用Swiper插件

1.安装swiper以及vue-awesome-swiper插件

注意！！不同swiper版本的使用方式也不同，以下以swiper@4.4.2为例

npm i swiper@4.4.2
npm i vue-awesome-swiper@4.1.1

2.在main.js中注册使用

①全局注册

import vueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(vueAwesomeSwiper)
import 'swiper/dist/css/swiper.min.css';

注意！！

安装vue-awesome-swiper报错的话采用
npm i vue-awesome-swiper@4.1.1 --legacy-peer-deps

②局部注册

import {swiper,swiperSlide} from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

3.在vue文件中使用swiper轮播图

①html页面

<swiper :options="swiperOption" ref="mySwiper" style="width: 50%">
  <swiper-slide
 v-for="item in swiperData" :key="item.id"
  style="background: pink;width: 100%;height: 200px">
  <div>  {{item.name}}</div>
  </swiper-slide>
//前进后退按钮
  <div class="swiper-button-prev" slot="button-prev" ></div>
  <div class="swiper-button-next" slot="button-next" ></div>
//指示器
  <div class="swiper-pagination"></div>
</swiper>

②在data中

swiperOption:{
            direction: 'horizontal',   //滑动方向默认是水平
             initialSlide: 0,  //设置初始化显示第几个slide默认显示第一个
            loop:true, // 是否循环滚动
            effect: 'fade',     //轮播图切换效果
            speed:300,  //切换速度
          //指示器小圆点
            pagination:{
              el:'.swiper-pagination',
              clickable:true,
            },
           //自动播放
            autoplay: {
              delay: 3000,
              stopOnLastSlide: false,
              disableOnInteraction: false
            },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
          },

滑动方向（direction）：默认为horizontal（水平） :  vertical(垂直）

切换效果：默认为slide 还有cube（方块)、coverflow、filp、cards、creative、fade（淡入淡出）filp是可以实现上下切换。

比如要一个slide展示多展图片可以选择

<swiper :options="swiperOption" ref="mySwiper" style="width: 50%">
  <swiper-slide v-for="item in swiperData" :key="item.id"
                style="background: pink;width: 100%;height: 200px">
 <div style="display: flex;flex-direction: row">
   <div v-for="inner in item.details" :key="inner.id" style="width: 50%">
     <div>{{inner.innerName}}</div>
   </div>
 </div>
  </swiper-slide>
  <div class="swiper-button-prev" slot="button-prev" ></div>
  <div class="swiper-button-next" slot="button-next" ></div>
  <div class="swiper-pagination"></div>
</swiper>

 swiperData:[
        {
          id:0,
          name:1,
          details:[
            {
              id:0,
              innerName:'1-0'
            },
            {
              id:1,
              innerName:'1-1'
            }
          ]
        },
        {
          id:1,
          name:2,
          details:[
            {
              id:0,
              innerName:'2-0'
            },
            {
              id:1,
              innerName:'2-1'
            }
          ]
        },
        {
          id:2,
          name:3,
          details:[
            {
              id:0,
              innerName:'3-0'
            },
            {
              id:1,
              innerName:'3-1'
            }
          ]
        }
       ]