vue中 swiper

Vue-Awesome Swiper多页面配置教程：轮播图组件与选项详解

最新推荐文章于 2024-03-01 16:46:29 发布

原创最新推荐文章于 2024-03-01 16:46:29 发布 · 336 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #swipe

vue 专栏收录该内容

9 篇文章

订阅专栏

安装：

npm install vue-awesome-swiper@3 --save-dev

main.js

import VueAwesomeSwiper from ‘vue-awesome-swiper’
Vue.use(VueAwesomeSwiper)

页面 多个swiper

<swiper ref="mySwiper" :options="swiperOptionsone" v-if='banner_list.length>0'>	
						<swiper-slide v-for="(item,index) in banner_list" :key="item.id" >
							<img :src="item.url" @click="push_more(item.id)">
						</swiper-slide>
</swiper>

<swiper ref="mySwipertow" :options="swiperOptions" v-if='ptho.length>0'>
						<swiper-slide v-for="(item,index) in ptho" :key="item.id" >
							<img :src="item">
						</swiper-slide>
</swiper>

页面引入

import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";

页面注册

components:{
	swiper,
	swiperSlide,
}

配置项:

swiperOptionsone: {
					loop: true,
					 autoplay: {
					  delay:3000,
					  stopOnLastSlide: true,
					  disableOnInteraction: true
					},
					// 设置点击箭头
							navigation: {
							  nextEl: ".swiper-button-next1",
							  prevEl: ".swiper-button-prev1"
						}
				  },
swiperOptions: {
				  	 loop: true,
				  	 autoplay: {
				  	  delay:3000,
				  	  stopOnLastSlide: true,
				  	  disableOnInteraction: true
				  	},
				  	// 设置点击箭头
				  			navigation: {
				  			  nextEl: ".swiper-button-next2",
				  			  prevEl: ".swiper-button-prev2"
				  		}
  },