vue3中swiper的使用

最新推荐文章于 2024-04-13 10:28:10 发布

小XiaXia

最新推荐文章于 2024-04-13 10:28:10 发布

阅读量938

点赞数

分类专栏： Vue框架文章标签： vue.js 前端

本文链接：https://blog.csdn.net/m0_51055743/article/details/125357449

版权

Vue框架专栏收录该内容

14 篇文章 0 订阅

订阅专栏

vue3中swiper的使用

1、安装指定版本

npm install --save swiper@5.4.5

2、引入

import Swiper from 'swiper';
import 'swiper/css/swiper.css'
// import style (>= Swiper 6.x)
//import 'swiper/swiper-bundle.css'

3、前端部分代码

  <div class="swiperBox">
    <div class="swiper-container"  id="swiperIndex">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
        <div class="swiper-slide">Slide 10</div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>

4、配置

mounted(){
      var mySwiper = new Swiper('#swiperIndex', {
              loop: true, // 循环模式选项
              // 如果需要分页器
              pagination: {
                el: '.swiper-pagination',
                clickable:true,
              },
              // 如果需要前进后退按钮
              navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
              },
      });
    }