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

在线预览    源码下载

爱编程-编程爱好者经验分享平台
版权所有 爱编程 © Copyright 2012. All Rights Reserved.
闽ICP备12017094号-3