vue中使用swiper

一. 下载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>

 

一. 下载swiper：

来源：CSDN

作者：还在漂流

链接：https://blog.csdn.net/weixin_43509194/article/details/103814779