vue中使用swiper轮播图

关于swiper

当前swiper已经到了8版本。

6版本及以上，已经支持了直接在前端框架中的使用。

6以下版本，不支持直接在前端框架中使用。

也就是说， 6以下版本，没有swiper-vue.js

swiper7、8不能在vue2中使用：

原因是，在swiper源码中，引入的8个vue方法都是vue3中的方法，在vue2中不存在。

如果在vue2中使用swiper7、8会报错。

在vue3中引入swiper7、8会有路径上的错误

官网代码如下：（这样去引入，会找不到相关模块）

  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';
  // Import Swiper styles
  import 'swiper/css';

正确的引入方式

  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js';
  // Import Swiper styles
  import 'swiper/swiper.min.css';

项目时间比较紧急，而且是vue2的项目，所以比较选择了6版本之前，最稳定的 5.4.5

在页面加载好之后再去装载swiper

<script>
import Swiper from 'swiper'; // 注意引入的是Swiper
import 'swiper/css/swiper.min.css' // 注意这里的引入
export default {
    name: 'CarouselShow',
    mounted() {
        new Swiper('.swiper-container', {
            autoplay: true,
            loop: true,
        })
    }
}
</script>

使用步骤

3、swiper的api配置项

<template>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide swiper-slide1">Slide 1</div>
            <div class="swiper-slide swiper-slide2">Slide 2</div>
            <div class="swiper-slide swiper-slide3">Slide 3</div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>  
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</template>

<script>
import Swiper from 'swiper'; // 注意引入的是Swiper
import 'swiper/css/swiper.min.css' // 注意这里的引入

export default {
    name: 'HelloWorld',
    data() {
    return {
         // swiper实例  实例上有各种方法
         swiperInstance: null
      }
    }
    mounted() {
		var swiperInstance = new Swiper('.swiper-container', {
			// config...
		})
	}
}
</script>
<style scoped>
</style>