CardSlide.js 卡片切换,超进化组件 S
Demo
How to use
npm i @nostar/card-slide -S
<div class="card-slide-box">
<div class="card-slide-wrapper">
<div class="card-slide">
1
</div>
<div class="card-slide">
2
</div>
<div class="card-slide">
3
</div>
</div>
</div>
import CardSlide from "@nostar/card-slide";
import "@nostar/card-slide/dist/css/card-slide.css";
new CardSlide(document.querySelector(".card-slide-box"), {
autoplay: 0,
gutter: 20,
speed: 350,
dragRelation: "rtl",
dragPrevable: false,
swiperStart: function (activeIndex) {
let _this = this;
_this.setStyle(_this.$slides[activeIndex], {
background: "#fff",
});
setTimeout(function () {
_this.setStyle(_this.$slides[activeIndex], {
background: "",
});
}, 150);
},
});
API
Option | Type | Default | Description |
---|---|---|---|
autoplay | int | 0 | 自动切换的毫秒数,为0则不开启 |
speed | int | 350 | 卡片切换的动画毫秒数 |
effect | string | 'ease-out' | 卡片切换的time function |
drag | boolean | true | 是否开启拖拽切换 |
dragRelation | string | 'ltr' | 拖拽方向识别,ltr或rtl,正反方向 |
dragDistance | int | 50 | 拖拽识别的像素距离 |
dragPrevable | boolean | true | 是否支持拖拽向前翻页 |
childrenTouchStop | boolean | false | 禁止事件冒泡 |
childrenTouchPrevent | boolean | true | 禁止事件浏览器默认行为 |
dragNextable | boolean | true | 是否支持拖拽向后翻页 |
nextBtn | string | '.card-slide-next' | dom下的下一张按钮的选择器 |
prevBtn | string | '.card-slide-prev' | dom下的上一张按钮的选择器 |
direction | string | 'horizontal' | 设置方向。水平:horizontal 垂直:vertical |
activeClass | string | 'card-slide-active' | 当前卡片的追加样式 |
gutter | int | 10 | 3D视角下的偏移量 |
width | int | undefined | 卡片宽度。不传会读取第一个卡片的宽度 |
height | int | undefined | 卡片高度。不传会读取第一个卡片的高度 |
swiperStart | function | function(activeIndex,nextIndex){} | this指向当前实例化对象。参数有opts/settings/$dom/$wrap/$slides/next/prev/activeIndex等 |