js堆叠卡片轮播图插件stackedCards

所属分类:媒体-幻灯片和轮播图

 19417  73  查看评论 (3)
分享到微信朋友圈
X
js堆叠卡片轮播图插件stackedCards ie兼容8

使用方法

在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();
相关插件-幻灯片和轮播图

jQuery门户网站带缩略图相册

jQuery带缩略图相册效,一个不错的相册效果,推荐大家使用哦!
  幻灯片和轮播图
 47752  446

jquery焦点轮播图多种切换效果

jquery+html5的3D焦点图多种切换效果
  幻灯片和轮播图
 39815  464

高大上的全屏自适应的banner图

这是一个自适应的全屏banner,可以用来做网站的banner效果非常好,容易修改,代码简洁,容易修改。
  幻灯片和轮播图
 57582  425

jQuery无缝滚动轮播图(原创)

各大网站常用的轮播图滚动效果,自动轮播,左右按钮切换
  幻灯片和轮播图
 22702  201

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    沧海游龙 0
    2021/12/17 10:13:59

    html结构中外层div要加类样式,不然css白引啊,这说明文档有点坑啊

    <div class="mycards stacked-cards"></div>
    回复
    Quit 0
    2021/12/10 11:31:16
    楼主,这个我照你的写出来了,现在问题是我并不是要简单的看图片,我的目的是滑块滑倒时播放该视频 回复
    Quit 0
    2021/12/10 11:30:12
    可以播放视频吗 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复