vue-awesome-swiper 轮播

最新推荐文章于 2025-09-10 02:14:56 发布

翻译最新推荐文章于 2025-09-10 02:14:56 发布 · 401 阅读

文章标签：

#vue-awesome-swiper # 轮播

前端同时被 2 个专栏收录

30 篇文章

订阅专栏

vue

14 篇文章

订阅专栏

本文介绍了vue-awesome-swiper的安装与引入方法。安装可通过npm或cnpm，引入方式有全局引入和组件引入。还提到根据开发需求可自定义分页器样式，最后给出了swiper的dome地址和中文网地址。

1.安装

npm install vue-awesome-swiper
或者 cnpm inatall vue-awesome-swiper

2.引入

全局引入main.js

import vueSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css' //引入样式

组件引入方式

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

import ("swiper/dist/css/swiper.css");

components: {

swiper,

swiperSlide

我的案例

html

<swiper :options="swiperOption" class='Y_yaoqing' ref="mySwiper">
			<swiper-slide v-for="(item,index) in list.poster" :key="'img'+index"><img :src="item.posterPic" alt="" class="" /></swiper-slide>
			
			<div class="swiper-pagination" slot="pagination"></div>
		</swiper>

	list: [], //页面所有数据
				//轮播设置
				swiperOption: {
					centeredSlides: true, //选中的图片在中间放大
					slidesPerView: 3, //显示的数量
					spaceBetween: 10,					
					//分页器设置
					pagination: {
						el: '.swiper-pagination',
						clickable: true, //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
					},
					loop: true, //循环
					on: {
						// 使用es6的箭头函数，使this指向vue对象
						slideChange: () => {
							// 通过$refs获取对应的swiper对象
							let swiper = this.$refs.mySwiper.swiper;
							let i = swiper.activeIndex;
							console.log(i)
							this.selectList = this.list.poster[i];

						}
					}

				},

根据开发需求，需要自定义分页器的样式的话，可以将分页器进行重新定义

pagination: {
                el: '.swiper-pagination',
                type: 'custom',
                autoplayDisableOnInteraction : false,
                renderCustom: function (swiper, current, total) {
                    var paginationHtml = " ";
                    for (var i = 0; i < total; i++) {
                        // 判断是不是激活焦点，是的话添加active类，不是就只添加基本样式类
                        if (i === (current - 1)) {
                            paginationHtml += '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
                        }else{
                            paginationHtml += '<span class="swiper-pagination-customs"></span>';
                        }                          
                    }
                    return paginationHtml;
                },
 }

css

 .swiper-pagination-custom {
				bottom: 5%;
				left: 0;
				width: 100%;
				height: 20px;
				/* background-color: red; */
				text-align: center;
			}
			/*自定义分页器的样式，这个你自己想要什么样子自己写*/
 .swiper-pagination-customs {
				width:10px;
				height:4px;
				background:rgba(255,205,207,1);
				border-radius:2px;
				/*width: 12px;
				height: 12px;*/
				display:inline-block;			
				margin: 0 3px;
				outline: 0;
			}
			/*自定义分页器激活时的样式表现*/
.swiper-pagination-customs-active {
				opacity: 1;
        		border: 3px solid #8e2829;
				background-color: #F8000B;
			}

wiper dome地址:https://surmon-china.github.io/vue-awesome-swiper/

wiper 中文网：https://www.swiper.com.cn/