swiper在vue中的基本使用及常见问题解决

1.说明:本文针对的环境是vue2及swiper6以下版本.另:本文只适合教小白如何在vue中使用swiper,并不会把swiper的api都码一遍,了解更多swiper详情,请移步swiper官网.这里只是最简单的入门教程.大佬勿喷.

2.废话不多说,先上效果.

3.开始:
3.1: 安装依赖.

npm install vue-awesome-swiper --save

(注意:如果安装后,启动项目报Module not found: Error: Can’t resolve ‘swiper/dist/css/swiper.css’ in …错误,那是因为所安装的swiper版本和所引入的swiper的css文件不对应导致的,那么可通过npm install vue-awesome-swiper@3.1.3 降版解决即可,这里的@3.1.3可按实际需求版本替换即可).

3.2:main.js引入.

import VueAwesomeSwiper from 'vue-awesome-swiper';

Vue.use(VueAwesomeSwiper);

import 'swiper/dist/css/swiper.css';   //css 不显示的问题可能就在这,swiper版本不一样,这样式引入也不一样.

3.3:在需使用swiper的组件内引入swiper和swiperSlide ;并在components内注册.

import { swiper, swiperSlide } from "vue-awesome-swiper";

export default {
  name: "Home",
  components: {
    swiper,
    swiperSlide,
  },
}

3.4:在需使用swiper的组件内的template和data中定义轮播内容区和参数配置等即可完成所需要的轮播效果.

<template>
  <div class="home">
    <swiper :options="swiperOption">
      <swiper-slide>
        <img
          src="@/assets/4.jpg"
          alt="图4"
          style="width: 100%; height: 500px"
        />
      </swiper-slide>
      <swiper-slide>
        <img
          src="@/assets/5.jpg"
          alt="图5"
          style="width: 100%; height: 500px"
        />
      </swiper-slide>
      <swiper-slide>
        <img
          src="@/assets/6.jpg"
          alt="图6"
          style="width: 100%; height: 500px"
        />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

data() {
    return {
      swiperOption: { // 所有的参数同 swiper 官方 api 参数一样
        autoplay: {   //自动轮播
          delay: 2000, //自动轮播切换时间间隔
        },
        loop: true, //回路,最后一屏接第一屏
        slidesPerView: "auto",
        loopedSlides: 6,
        effect: "coverflow",
        slideToClickedSlide: true,
      },
    };
  },