移動端&PC端 vue-concise-slider 輪播組件

vue-concise-slider,一個簡單的滑動組件,配置簡單,支持自適應/全屏+按鈕+分頁,同時兼容移動端和PC端

 

 

 

 

 

 

 

 

 

特點

• 簡單配置
• 輕量 (~35kB gzipped)
• 多種滑動樣式

目前已實現

•  全屏自適應
•  移動端兼容
•  垂直滾動
•  定時自動切換
•  不定寬度滾動
•  無縫循環滾動
•  多級滾動
•  漸變滾動
•  旋轉滾動
•  page中加入自定義組件
•  使用slot替代page
•  自定義分頁
•  居中滑動
•  新的coverflow
•  層級嵌套slider

未來將實現

•  虛擬slider

安裝

npm install vue-concise-slider --save

如何使用

<template>
<!-- 制作一個框架包裹slider -->
 <div style="width:70%;margin:20px auto;height:400px">
      <!-- 配置slider組件 -->
      <slider :pages="pages" :sliderinit="sliderinit" @slide='slide' @tap='onTap' @init='onInit'>
          <!-- 設置loading,可自定義 -->
          <div slot="loading">loading...</div>
      </slider>
 </div>
</template>
<script>
import slider from 'vue-concise-slider'// import slider components
export default {
   el: '#app',
   data () {
      return {
        //Image list
        pages:[
          {
          html: '<div class="slider1">slider1</div>',
          style: {
            'background': '#1bbc9b'
            }
          },
          {
            html: '<div class="slider2">slider2</div>',
            style: {
              'background': '#4bbfc3'
            }
          },
          {
            html: '<div class="slider3">slider3</div>',
            style: {
              'background': '#7baabe'
            }
          }
        ],
        //Sliding configuration [obj]
        sliderinit: {
          currentPage: 0,
          thresholdDistance: 500,
          thresholdTime: 100,
          autoplay:1000,
          loop:true,
          direction:'vertical',
          infinite:1,
          slidesToScroll:1,
          timingFunction: 'ease',
          duration: 300
        }
      }
    },
    components: {
        slider
    },
    methods: {
      // Listener event
      slide (data) {
        console.log(data)
      },
      onTap (data) {
        console.log(data)
      },
      onInit (data) {
        console.log(data)
      }
    }
}
</script>

 

相關配置

1. pagination: true, // 底部小圓點是否隱藏（true顯示，false隱藏） 2. currentPage: 0, // 當前頁碼 3. thresholdDistance:500, // 滑動判定距離 4. thresholdTime:100, // 滑動判定時間 5. autoplay:2000, // 自動滾動[ms] 6. loop:true, // 是否循環滾動 7. direction:'vertical', // 滾動方向 8. infinite:1, // 無限滾動前后遍歷數 9. slidesToScroll:1, // 滾動行數

Demo地址 https://warpcgd.github.io/vue-concise-slider/demos/

文檔地址 https://warpcgd.github.io/vue-concise-slider/docs.html