js堆叠卡片轮播图插件stackedCards

每张卡片与其他卡片交换,让您的内容框看起来像堆叠的卡片

Stacked Cards

Slide


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

	stackedCard.init();


FanOut


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

	stackedCard.init();




Usage

1. Setup HTML Markup

						
	<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>
						
					

2. Add stackedCards.css & stackedCards.js into <head> You may add stackedCards.js before your closing </body> tag

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

3. Initialize the stackedCards in your script file

						
	var stackedCard = new stackedCards({
	 	selector: '.mycards',
	 	layout: "slide",
	 	transformOrigin: "center",
	});

	stackedCard.init();

						
					


适用浏览器:Chrome、FireFox、360、搜狗、Opera、傲游. 不支持Windows版Safari、IE8及以下浏览器。

来源:站长图库