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

雨文2021

于 2022-07-14 19:23:46 发布

阅读量3.4k

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_28170105/article/details/125791182

版权

本文介绍了如何在Vue项目中利用Swiper组件创建上下切换的无缝轮播图，适用于PC端，并提供了自动轮播的效果。详细阐述了Swiper的安装过程及关键实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最终效果

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

最低0.47元/天解锁文章