@nostar/card-slide

CardSlide.js 卡片切换，超进化组件 S

Demo

在线预览：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等