[JavaScript知识库]vue2.x集成 swiper轮播图

1、安装 vue-awesome-swiper

npm install vue-awesome-swiper swiper@5.x --save

2、使用 vue-awesome-swiper

<template>
	<swiper class="swiper" :options="swiperOption" ref="mySwiper">
		<!-- slides -->
		<swiper-slide>I'm Slide 1</swiper-slide>
		<swiper-slide>I'm Slide 2</swiper-slide>
		<swiper-slide>I'm Slide 3</swiper-slide>
		<swiper-slide>I'm Slide 4</swiper-slide>
		<swiper-slide>I'm Slide 5</swiper-slide>
		<swiper-slide>I'm Slide 6</swiper-slide>
		<swiper-slide>I'm Slide 7</swiper-slide>
		<!-- 分页控制器 -->
		<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>
</template>

<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'

// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  },
	data() {
		return {
			swiperOptions: {
				autoplay: {
					delay: 3000,
					disableOnInteraction: false
				},
				initialSlide: 0,
				loop: true,
				pagination: {
					el: '.swiper-pagination',
					type: 'bullets',
					clickable: true
				},
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
			}
		}
	},
	computed: {
		swiper() {
			return this.$refs.mySwiper.$swiper
		}
	},
	mounted() {
		console.log('Current Swiper instance object', this.swiper)
		this.swiper.slideTo(3, 1000, false)
	},
}
</script>

<style lang="stylus" scoped>
.swiper
	--swiper-theme-color #ffd4b3
	--swiper-pagination-color #FF995B