vue中使用swiper

原创已于 2022-03-17 17:14:50 修改 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue中使用swiper #swiper

于 2019-05-21 16:21:10 首次发布

vue 专栏收录该内容

62 篇文章

订阅专栏

博客介绍了在Vue中使用Swiper的方法。首先要下载Swiper，接着在main.js里引入其CSS，然后在需要使用的组件里引入Swiper并在mounted里初始化，最后完成HTML部分。

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

一. 下载swiper：

npm install swiper -S

二. css：

在main.js里引入css

import Vue from 'vue'
import 'swiper/dist/css/swiper.css';

三. js：

在需要使用swiper的组件里引入swiper，swiper的初始化放在mounted里（可以把官网例子的启动 var mySwiper = 删掉）；

<script>
import Swiper from 'swiper';
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted(){
     new Swiper ('.swiper-container', {
    loop: true,
    // 如果需要分页器
    pagination: '.swiper-pagination',
    // 如果需要前进后退按钮
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    // 如果需要滚动条
    scrollbar: '.swiper-scrollbar',
  })        
  }
}
</script>

四. html：

<div class="swiper-container">
    <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>