使用vue-awesome-swiper實現幻燈片組件開發

vue的swiper組件 https://www.npmjs.com/package/vue-awesome-swiper

 

一、安裝 swiper 和 vue-awesome-swiper 插件

cnpm install swiper vue-awesome-swiper --save

（截圖裏只安裝了vue-awesome-swiper，後面我又安裝了swiper，你們本身補充下）

 

 

 

 

二、在 components目錄下，建立slider目錄，導入圖片素材，建立index.vue

<template>
  <swiper ref="mySwiper" :options="swiperOptions">
    <swiper-slide v-for="(slider,index) in sliders" :key="index">
        <a :href="slider.linkUrl">
            <img :src="slider.imgUrl">
        </a>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
  </swiper>
</template>

<script> import { Swiper, SwiperSlide } from 'vue-awesome-swiper'; import 'swiper/css/swiper.css'; export default { name:"Slider", title: 'Autoplay', components:{ Swiper, SwiperSlide }, data() { return { sliders:[ { index:0, linkUrl:'www.baidu.com', imgUrl:require('./1.jpg') },{ index:0, linkUrl:'www.baidu.com', imgUrl:require('./2.jpg') },{ index:0, linkUrl:'www.baidu.com', imgUrl:require('./3.jpg') },{ index:0, linkUrl:'www.baidu.com', imgUrl:require('./4.jpg') } ], swiperOptions: { spaceBetween: 30, centeredSlides: true, autoplay: { delay: 2500, disableOnInteraction: false }, loop: true, pagination: { el: '.swiper-pagination', clickable: true }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' } } } }, computed: { swiper() { return this.$refs.mySwiper.$swiper; } }, mounted() { console.log('Current Swiper instance object', this.swiper); this.swiper.slideTo(3, 1000, false); } } </script>

<style lang="scss" scoped> .swiper-container{ width:100%; height:180px; } .swiper-slide a{ display:block; width:100%; height:100%; & img{ width:100%; height:100%; } } </style>

 

三、建立pages/home/index.vue，引入slider組件

<template>
    <div class="home">
        <slider/>
    </div>

</template>

<script> import Slider from 'components/slider'; export default { name:"Home", components:{ Slider } } </script>

 

四、添加路由 src/router/index.js

import Vue from 'vue' import Router from 'vue-router' import Home from 'pages/home' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Home', component: Home } ] })

 

效果圖