js堆叠卡片轮播图插件stackedCards


源码介绍

简要教程

stackedCards是一款js堆叠卡片轮播图插件。该插件可以制作出类似卡片堆叠的轮播图效果,支持滑动和扇形两种模式。

使用方法

在HTML文件中引入。

<link rel="stylesheet" type="text/css" href="stackedCards.css"/>
    <script src="stackedCards.js"><script>          
                
HTML结构
<div class="mycards">
    <ul>
        <li>your content</li>
        <li>your content</li>
        <li>your content</li>
        <li>your content</li>
        <li>your content</li>
    </ul>
</div>
                
javascript
var stackedCard = new stackedCards({
    selector: '.mycards',
    layout: "slide",
    transformOrigin: "center",
});

stackedCard.init();
                

扇形堆叠轮播图

var stackedCard = new stackedCards({
    selector: '.stacked-cards',
    layout: "fanOut",
    transformOrigin: "bottom",
});

stackedCard.init();                
                

stackedCards插件的github网址为:https://github.com/junedchhipa/stacked-cards

点赞(0) 打赏

立即下载

点击下载

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部