SPC后续之vue-awesome-swiper轮播图

本文链接：https://blog.youkuaiyun.com/c_x_m/article/details/127486754

1.版本

 "swiper": "^6.8.4",
 "vue-awesome-swiper": "^4.1.1",

2.html

<swiper ref="smtSwiper" :options="swiperOptions">
	<swiper-slide v-for="(i, index) in pip" :key="index" class="card-left swiper-slide">
		<div class="circle"></div>
		<div class="card-left-title">
			<span class="num">{{ i.value }}</span>
			<span class="title">{{ i.key }}</span>
		</div>
	</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>

3.使用页引入及设定

由于我不需要左右切换，所以都注释掉了

<script>
import Vue from "vue";
import VueAwesomeSwiper from "vue-awesome-swiper";

import { Swiper, Autoplay, Pagination, Navigation } from "swiper";
Swiper.use([Autoplay, Pagination, Navigation]);

import "swiper/swiper-bundle.css";
Vue.use(VueAwesomeSwiper);
export default {
	name: "detail-data",
	data() {
		return {
			swiperOptions: {
				direction: "vertical", //垂直模式
				speed: 100,
				autoplay: {
					disableOnInteraction: false,
				},
				paginationClickable: true,
				slidesPerView: "auto", //设置slider容器能够同时显示的slides数量
				slidesPerColumn: 1,
				disableOnInteraction: false,
				// 分页设定
				//左右切换
				// navigation: {
				// 	nextEl: ".swiper-button-next",
				// 	prevEl: ".swiper-button-prev",
				// },
				//分页器
				pagination: {
					el: ".swiper-pagination",
					clickable: true, // 允许点击小圆点跳转
				},
			},
		};
	},
  }
}