vue輪播圖插件vue-concise-slider的使用
vue-concise-slider
vue-concise-slider,一個(gè)簡(jiǎn)單的滑動(dòng)組件,配置簡(jiǎn)單,支持自適應(yīng)/全屏+按鈕+分頁(yè),同時(shí)兼容移動(dòng)端和PC端
版本
v2.4.7 支持vue2.0+
特點(diǎn)
- 簡(jiǎn)單配置
- 輕量 (~24kB gzipped)
- 多種滑動(dòng)樣式
目前已實(shí)現(xiàn)
- 全屏自適應(yīng)
- 移動(dòng)端兼容
- 垂直滾動(dòng)
- 定時(shí)自動(dòng)切換
- 不定寬度滾動(dòng)
- 無(wú)縫循環(huán)滾動(dòng)
- 多級(jí)滾動(dòng)
- 漸變滾動(dòng)
- 旋轉(zhuǎn)滾動(dòng)
- page中加入自定義組件
未來(lái)將實(shí)現(xiàn)
- 漸變滾動(dòng)
- 視差效果
鏈接
安裝
npm install vue-concise-slider --save
如何使用
<template>
<!-- 制作一個(gè)框架包裹slider -->
<div style="width:70%;margin:20px auto;height:400px">
<!-- 配置slider組件 -->
<slider :pages="pages" :sliderinit="sliderinit" @slide='slide' @tap='onTap' @init='onInit'>
<!-- 設(shè)置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>
瀏覽器支持
現(xiàn)代瀏覽器及ie10+
貢獻(xiàn)
- 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
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 基于vue.js輪播組件vue-awesome-swiper實(shí)現(xiàn)輪播圖
- Vue 過(guò)渡實(shí)現(xiàn)輪播圖效果
- vue.js+elementUI實(shí)現(xiàn)點(diǎn)擊左右箭頭切換頭像功能(類(lèi)似輪播圖效果)
- vue.js整合mint-ui里的輪播圖實(shí)例代碼
- vue.js實(shí)現(xiàn)簡(jiǎn)單輪播圖效果
- Vue的輪播圖組件實(shí)現(xiàn)方法
- 基于vue2.0實(shí)現(xiàn)簡(jiǎn)單輪播圖
- vue利用better-scroll實(shí)現(xiàn)輪播圖與頁(yè)面滾動(dòng)詳解
- vue使用swiper實(shí)現(xiàn)中間大兩邊小的輪播圖效果
- Vue3.0手寫(xiě)輪播圖效果
相關(guān)文章
vue在路由中驗(yàn)證token是否存在的簡(jiǎn)單實(shí)現(xiàn)
今天小編就為大家分享一篇vue在路由中驗(yàn)證token是否存在的簡(jiǎn)單實(shí)現(xiàn),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
Element Plus暗黑模式及模式自由切換的實(shí)現(xiàn)
本文詳細(xì)介紹了如何在使用Vite構(gòu)建的Vue項(xiàng)目中實(shí)現(xiàn)ElementPlus暗黑模式及模式切換,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-11-11
vue實(shí)現(xiàn)內(nèi)容可滾動(dòng)的彈窗效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)內(nèi)容可滾動(dòng)的彈窗效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09
vue自定義權(quán)限指令的實(shí)現(xiàn)
本文主要介紹了vue自定義權(quán)限指令的實(shí)現(xiàn)2024-05-05
在axios中使用params傳參的時(shí)候傳入數(shù)組的方法
今天小編就為大家分享一篇在axios中使用params傳參的時(shí)候傳入數(shù)組的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09

