记一次使用vue-awesome-swiper

最新推荐文章于 2024-08-19 09:36:01 发布

冰魂破

最新推荐文章于 2024-08-19 09:36:01 发布

阅读量119

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/ks8380/article/details/102692992

版权

vue 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

安装


npm install  vue-awesome-swiper

引入： main.js

import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper)

使用swiper 进行轮播效果关于左右按钮出现的问题主要是 slot问题

<swiper :options="swiperOption" ref="mySwiper" >
		<!-- slides -->
		<swiper-slide class="slide">
			<div>
				<img src="@/assets/img/Coordinators1.png" alt="">
			</div>
		</swiper-slide>
        <swiper-slide class="slide">
			<div>
				<img src="@/assets/img/Coordinators1.png" alt="">
			</div>
		</swiper-slide>
					
		<!-- 如果需要导航按钮 -->
		<p class="swiper-button-prev" slot="button-prev"></p>
  		<p class="swiper-button-next" slot="button-next"></p>
</swiper>

data(){
    return {

    swiperOption:{
		autoplay: {
            autoplay: 1500,
            disableOnInteraction: false,//放置触摸后自动轮播停止
		},
		loop:true,
		slidesPerView: 3,
		spaceBetween: 30,
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev'
		},
		     },
    }
    
}

主要是 <p class="swiper-button-prev" slot="button-prev"></p> 的 slot="button-prev" 如果不加slot 会导致无法正常显示左右按钮