vue-awesome-swiper插件

最新推荐文章于 2025-09-04 18:55:33 发布

转载最新推荐文章于 2025-09-04 18:55:33 发布 · 52 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhihou/p/7493887.html

文章标签：

#javascript #ViewUI

本文介绍如何安装及使用Vue-Awesome-Swiper组件，实现网页中常见的轮播效果。通过npm安装并引入Vue-Awesome-Swiper，然后在页面中配置基本参数即可实现带导航按钮和分页器的轮播功能。

http://www.cnblogs.com/songrimin/p/6905136.html

这个地址不错

在上一些我的demo代码

第一步安装

npm install vue-awesome-swiper --save

main.js

require('swiper/dist/css/swiper.css')
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

<template>
    <div id="swiper-box">
        <swiper :options="swiperOption">
            <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</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>
      <!-- <div class="swiper-scrollbar" slot="scrollbar"></div> -->
        </swiper>
    </div>
</template>
<script>

export default{
    data(){
        return{
            swiperOption:{
                pagination:'.swiper-pagination',
                paginationClickable:true,
                nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev'
                /*loop:true,
                autoplay : 2000,
                grabCursor: true*/
            }
        }
    }
}
</script>
<style scoped>
*{
    box-sizing:border-box;
}
    #swiper-box{
        width:600px;
        height:400px;
        margin:0 auto;
        position:relative;
        border:1px solid #ddd;
    }
    .swiper-container{
        width:100%;
        height:100%;
    }
    .swiper-slide{
        background:#ccc;
        border:1px solid red;
    }
</style>