Skip to content

Likely6/vue-bswiper

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 

Repository files navigation

vue-bswiper

vue-bswiper是基于better-scroll的vue的轮播组件,它通过props控制是否自动轮播,是否可以循环切换,控制轮播速度、自动轮播时图片切换速度等。

npm安装

npm i vue-bswiper --save

props

参数 说明 类型 默认值
loop 是否可以循环切换图片 Boolean true
autoPlay 是否自动播放 Boolean true
speed 动画滚动速度 Number 800
interval 自动切换图片的时间间隔 Number 2000
showDot 是否显示分页器 Boolean true

例子 html应该按照下面例子的结构,其中a标签可以替换成其他标签

<template>
  <div class="banner">
    <Swiper :autoPlay="false">
      <a href="http://gh.moment16.com">
        <img src="http://d300.paixin.com/thumbs/1016676/40179869/staff_1024.jpg?imageView2/2/w/400/h/400">
      </a>
      <a href="javascript:void(0)">
        <img src="http://d007.paixin.com/thumbs/1003434/9017610/staff_1024.jpg?imageView2/2/w/400/h/400">
      </a>
    </Swiper>
  </div>
</template>
<script>
import BSwiper from 'vue-bswiper'
export default {
  components: {
    BSwiper
  }
}
</script>
<style lang="scss" scoped>
.banner{
  width:100%;
  height: 200px;
}
</style>

About

基于better-scroll实现的轮播组件

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published