vue-concise-slider vue滑動元件

warpcgd發表於2019-02-16
VueIDE元件

中文 | English

vue-concise-slider

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

版本

v2.2.0 支援vue2.0+

特點

  • 簡單配置

  • 輕量 (~17.8kB gzipped)

  • 多種滑動樣式

目前已實現

  • [x] 全屏自適應

  • [x] 移動端相容

  • [x] 垂直滾動

  • [x] 定時自動切換

  • [x] 不定寬度滾動

  • [x] 無縫迴圈滾動

  • [x] 多級滾動

未來將實現

  • [ ] 漸變滾動

  • [ ] 視差效果

連結

安裝

  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>

瀏覽器支援

現代瀏覽器及ie10+

貢獻

  • Fork it!

  • Create your feature branch: git checkout -b my-new-feature

  • Commit your changes: git commit -am `Add some feature`

  • Push to the branch: git push origin my-new-feature

  • Submit a pull request

有更好的想法？

歡迎來留下你的意見:https://github.com/warpcgd/vu…

BUG？oh no!

可以在這裡提交,會盡快處理:https://github.com/warpcgd/vu…

相關文章