Error resolution and use of Vue swiper carousel

1. Download the swiper plug-in

Question 1: According to some old tutorials, only vur-awesome-swiper is installed

This situation is definitely not available, you need to first npm install swiper --s

npm install swiper --s

Question 2: CSS was not introduced when swiper was introduced

import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css'

Usually this is the path written in this way, you can find it in node-modules yourself, you can import it globally or locally, I imported it locally

If the swiper version is higher, the old import method cannot be used above 6.0, in main.js

import "swiper/swiper-bundle.css";

Question 3: There may be various error reports during the process. In summary, most of the problems are version mismatches.

npm install [email protected] --save

In addition main.js imports:

//新版本

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)


//旧版本
import vueSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(vueSwiper)

Two, the use of swiper

 In the swiper component:

<template>
  <div class="swiper-main">
    <swiper :options="swiperOption">
      <div class="swiper-button-prev" slot="button-prev"></div>
      <swiper-slide v-for="(item, index) in swiperList" :key="index">
        <img :src="item.imgUrl" alt="" />
      </swiper-slide>

      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
    <div class="swiper-pagination"></div>
  </div>
</template>

I wrote down some picture data for a simple experiment, and set some relevant parameters used in the swiper, such as the carousel speed, the number of pages below the small dots, and the left and right page turning.

<script>
// import 'swiper/swiper-bundle.css'
import "swiper/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  data() {
    return {
      swiperList: [
        {
          id: 1,
          imgUrl: "/images/swiper1.png",
        },
        {
          id: 2,
          imgUrl: "/images/swiper2.png",
        },
        {
          id: 3,
          imgUrl: "/images/swiper3.png",
        },
        {
          id: 4,
          imgUrl: "/images/swiper1.png",
        },
        {
          id: 5,
          imgUrl: "/images/swiper2.png",
        },
        {
          id: 6,
          imgUrl: "/images/swiper3.png",
        },
      ],
      swiperOption: {
        pagination: {
          el: ".swiper-pagination",
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        autoplay: 3000,
        speed: 1000,
      },
    };
  },
  components: {
    swiper,
    swiperSlide,
  },
};
</script>

For the specific style, just adjust it by yourself. Use the inspection tool to see what its class name is and then modify it to what you want.