vue引入swiper

第一步，在控制台下载依赖包，下载成功后，会在 package.json 文件中多出一个   "swiper": "^3.4.2",   package.json 文件在根目录下

cnpm i [email protected] -S

第二步，在 main.js 引入css文件，main.js 文件在 src 目录下

import 'swiper/dist/css/swiper.css';

第三步，在页面中的 script 标签中引入 swiper

import Swiper from 'swiper';

第四步，在 mounted 引入所需要的功能

  mounted(){
    new Swiper ('.swiper-container', {
        loop: true,
        // 如果需要分页器
        pagination: '.swiper-pagination',
        // 如果需要前进后退按钮
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        // 如果需要滚动条
        scrollbar: '.swiper-scrollbar',
    })
  },

第五步，在 template 组件中添加 html 标签

  <template>
      <div class="swiper-container">
          <div class="swiper-wrapper">
              <div class="swiper-slide">Slide 1div>
              <div class="swiper-slide">Slide 2div>
              <div class="swiper-slide">Slide 3div>
          div>
          
          <div class="swiper-pagination">div>
          
          <div class="swiper-button-prev">div>
          <div class="swiper-button-next">div>
          
          <div class="swiper-scrollbar">div>
      div>
  template>

 

转载于:https://www.cnblogs.com/Hajar/p/11350542.html