效果图:
实现步骤:
1.下载swiper
npm i swiper@5.x vue-awesome-swiper@4.1.1 -S
2.引入html结构
<div class="homeCon1"> <div class="homeCon1-banner"> <div class="bannerLeft"> <div class="index-fit"> <div class="fit-h1">新闻中心</div> <p>NEWS CENTER</p> <div class="more-btn">查看更多</div> <!-- 下一页 --> <div class="swiper-button-next" slot="button-prev"></div> <!-- 上一页 --> <div class="swiper-button-prev" slot="button-next"></div> </div> </div> <div class="bannerRight"> <swiper ref="mySwiper" :options="swiperOption"> <swiper-slide v-for="(item, index) in 6" :key="index"> <div class="pit-box">slide{{index}}</div> </swiper-slide> <!-- 分页器 --> <div slot="pagination" class="swiper-pagination"> <span class="swiper-pagination-current"></span><span>"/"</span><span class="swiper-pagination-total"></span> </div> </swiper> </div> </div> </div>
3.在使用的页面引入swiper并注册
//引入
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
//注册
components: {
Swiper,
SwiperSlide,
}
4.在data中配置swiperOption
swiperOption: {
// 衔接滑动
loop: true,
// 自动滑动
autoplay: {
delay: 2000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
slidesPerView: 3,
paceBetween: 20,
slideToClickedSlide: true,
// 使用前进后退按钮来控制Swiper切换。
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination', //与slot="pagination"处 class 一致
clickable: true,
type: 'fraction',
},
},
5.其他配置项可参考swiper官网
https://www.swiper.com.cn/api/pagination/448.html