Vue项目中使用轮播图插件vue-awesome-swiper

使用插件vue-awesome-swiper

1、下载

npm install vue-awesome-swiper --save

2、在main.js中引入

import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
import 'swiper/dist/css/swiper.css'（css需要单独引用）

3、在组件中使用

<swiper :options="swiperOption">
	<swiper-slide>1</swiper-slide>
	<swiper-slide>1</swiper-slide>
	<swiper-slide>1</swiper-slide>
</swiper>

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  name: '',
  data () {
    return {
      swiperOption:{
        slidesPerView: 'auto',
        centeredSlides:true,
        spaceBetween: 10,
        loop:true,
        speed:600, //config参数同swiper4,与官网一致
      }
    }
  },
  components: {
    swiper,
    swiperSlide
  } 
}

在vue中使用轮播图方式二：直接引入轮播图插件

swiper官方文档地址：swiper中文网

1、安装

npm i swiper@3.4.2 -S

2、直接在组件中加载插件

import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';

3、使用

template模板中

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">slider1</div>
    <div class="swiper-slide">slider2</div>
    <div class="swiper-slide">slider3</div>
  </div>
</div>

// js中：这里需要注意代码应该写在mounted函数中
mounted(){
      //初始化轮播图
      var swiper = new Swiper('.swiper-container', {
        autoplay:5000,
        loop: true,
      });
    }

可以选择给swiper定义一个大小

.swiper-container {
    width: 600px;
    height: 300px;
}  

相关博客链接:https://segmentfault.com/a/1190000014609379