Swiper的安装及使用

是小张吖~

已于 2022-04-06 11:07:47 修改

阅读量7.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签：前端

于 2022-04-04 17:29:15 首次发布

本文链接：https://blog.csdn.net/m0_56272227/article/details/123956286

vue 专栏收录该内容

2 篇文章

订阅专栏

什么是Swiper

Swiper（swiper master）是一个第三方的库，可以用来实现移动端、pc端的滑动操作，十分方便（官方文档Swiper中文网-轮播图幻灯片js插件,H5页面前端开发）。

为什么大家都喜欢使用Swiper

免费，开源，稳定，应用广泛，文档丰富，大量活跃用户解答疑问，swiper应用广泛，使用频率仅次于jquery, 轮播图类排名第一，是网页设计师必备技能，众多耳熟能详的品牌在使用：阿里、腾讯、百度、拼多多、网易、华为、格力、喜茶、顺丰等，大量demo即下即用，前端新手亦可快捷做出精美效果。简单配置即可实现手机、电脑网页大部分滑动功能，焦点图、tab、触摸导航等。

那么如何在vue中使用swiper

1. 下载Swiper

首先使用npm或者cnpm下载swiper

cnpm install swiper //我下载的是8.0版本的(npm install swiper@8.0.1)

2. 引入Swiper

// 可以直接在组件里引入这个文件
import Swiper from 'swiper/swiper-bundle.min.js';

//一定要引入css
import 'swiper/swiper-bundle.min.css';

3. 使用Swiper ,需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件，不同的swiper版本用到的文件名略有不同，可下载swiper文件或使用CDN。添加HTML内容，Swiper7的默认容器是'.swiper', Swiper6之前是'.swiper-container'

<div class="swiper">
    <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>
    <!-- 如果需要使用分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条-->
    <div class="swiper-scrollbar"></div>
</div>

4. mounted里面调用

mounted() {
       new Swiper('.swiper', {
          direction: 'vertical', // 垂直切换选项
          loop: true, // 循环模式选项
            
          // 如果需要分页器
          pagination: {
             el: '.swiper-pagination'
          },

          // 如果需要前进后退按钮
          navigation: {
             nextEl: '.swiper-button-next',
             pervEl: '.swiper-button-prev'   
          },

          // 如果需要滚动条
          scrollbar: {
              el: '.swiper-scrollbar'
          }
        })
      }

注意：如果想要从后台请求图片放上去new Swiper要写在网络请求成功的函数里面，否则不会出来数据