vue中使用swiper实现上下切换无缝轮播图pc端简单自动轮播效果

最新推荐文章于 2024-06-18 23:11:10 发布

雨文2021

最新推荐文章于 2024-06-18 23:11:10 发布

阅读量3.1k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_28170105/article/details/125791182

版权

最终效果

swiper 安装

npm i swiper

实现代码

<template>
  <div class="banner_container">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in bannerList" :key="item.id">
          <img :src="item.picurl" />
        </div>
      </div>
      <div class="swiper-pagination"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
</template>

<script>
  import Swiper, { Pagination, Autoplay,Navigation } from 'swiper'
  imp