js堆叠卡片轮播图插件stackedCards

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > js堆叠卡片轮播图插件stackedCards
js堆叠卡片轮播图插件stackedCards
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2019-09-02
    阅读:
简要教程

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