vue轮播组件-vue-fakin-slider

年关了,公司也没什么事,闲来无事就写个vue轮播组件。

vue-fakin-slider

一个vue无缝轮播组件,兼容pc和移动,体积非常小

Demo

 git clone https://github.com/CuteFakin/Vue-Fakin-Slider.git
 npm install
 npm run serve

安装

 npm install vue-fakin-slider

使用

import { FakinSlider, FakinSliderItem } from 'vue-fakin-slider';

注册:

Vue.component('fakin-slider', FakinSlider);
Vue.component('fakin-item', FakinSliderItem);

示例

 <fakin-slider>
     <fakin-item v-for="(item,index) in list">
         <a :href="item.src">
             <img :src="item.src" alt="">
         </a>
     </fakin-item>
 </fakin-slider>

配置

配置 类型 描述 默认值
direction String 轮播方向(horizontal/vertical) horizontal
speed Number 轮播速度 300
disabled Boolean 移动端是否禁止拖拽 false
autoSwipe Number 自动轮播的延迟 3000
showIndicators Boolean 是否显示分页器 true
showButton Boolean 是否展示切换按钮 true
indicatorsCut Boolean 是否开启分页器切换 false

indicatorsCutshowButton只能在pc使用,移动端是禁止的

你必须为vue-fakin-slider指定一个外部的容器,指定宽度和高度,这样才能兼容pc和移动

for example

 <div class="banner">
      <fakin-slider :list="list" :showIndicators="true" :showButton="true" :speed="500" :autoSwipe="5000"
                          direction="horizontal" :disabled="false">
           <fakin-item v-for="(item,index) in list">
               <a :href="item.src">
                        <img :src="item.src" alt="">
                </a>
           </fakin-item>
     </fakin-slider>
</div>

样式

.banner {
        width: 100%;
        height: 500px
    }

@media screen and (max-width: 768px) {
     .banner {
         width: 100%;
         height: 200px
    }
}

当前组件只有默认loop模式,其他模式下个版本会更新。