如何在vue项目中搭配使用swiper

如何在vue项目中搭配使用swiper

1:命令行安装swiper

切记：安装命令时一定要在vue启动下的目录下进行安装，它会自动安装到一个node_modules模块里

安装命令：npm install swiper@5.2.0 vue-awesome-swiper@4.1.1 --save

各项配置参数：https://swiperjs.com/swiper-api#parameters

swiper用例说明:https://github.com/surmon-china/vue-awesome-swiper

总结：一定要安装这两个版本的，不然太信的或者太旧的会导致在引入的时候包的路径不对，或者是包就不全，没有或引入的那一层文件，会很麻烦，一定一定要下载这两个版本的才可以

2：在vue/src/untls 进行以下配置

import Vue from ‘vue’

import VueAwesomeSwiper from ‘vue-awesome-swiper’

import ‘swiper/css/swiper.css’

Vue.use(VueAwesomeSwiper)

因为untls只是一个实用工具，这些代码要最终要导入main.js中才能使用

3：导入主文件main.js操作

import “./utils/swiper”

4：使用swiper

 <swiper class="swiper" :options="swiperOptions">
      <!-- 轮播图的最外层包围 -->
      <swiper-slide v-for="item in data.carouselItems" :key="item.cid">
        <img :src="baseUrl + item.img" alt="" />
      </swiper-slide>
      <!-- swiper 预留了插槽，例如上一页，下一页，页数的显示 -->
      <div class="swiper-pagination" slot="pagination"></div>
      <!-- 上一页  下一页 -->
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
  </swiper>

需要在data里定义这样一些数据对轮播进行渲染

<script>
    swiperOptions: {
        // 页数指示点的配置
        pagination: {
          el: ".swiper-pagination",
        },
        // 自动滚动
        autoplay: {
          delay: 3000, //滚动时间间隔
          disableOnInteraction: false, //不可用当用户触摸后，false代表失效
        },
        loop: true, //循环滚动
        effect: "fade", //动画特效coverflow  cube  fade  flip
        //上一页下一页按钮
        navigation: {
          nextEl: ".swiper-button-next", //下一页
          prveEl: ".swiper-button-prev", //上一页
        },
      },
</script>

如项进行更多渲染，请到官网https://www.swiper.com.cn/api/index.html查询