js堆叠卡片轮播图插件stackedCards

js堆叠卡片轮播图插件stackedCards

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

使用方法

在HTML文件中引入。

1
2
<link rel="stylesheet" type="text/css" href="stackedCards.css"/>
    <script src="stackedCards.js"><script>

HTML结构

1
2
3
4
5
6
7
8
9
<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

1
2
3
4
5
6
7
var stackedCard = new stackedCards({
    selector: '.mycards',
    layout: "slide",
    transformOrigin: "center",
});
 
stackedCard.init();

扇形堆叠轮播图

1
2
3
4
5
6
7
var stackedCard = new stackedCards({
    selector: '.stacked-cards',
    layout: "fanOut",
    transformOrigin: "bottom",
});
 
stackedCard.init();
当前内容只有登录了才能查看,如果您已经注册,请登录
0

发表评论