这个插件是一款jQuery和css3超酷三面折纸3D幻灯片插件。插件中使用了CSS 3D Transforms、透视和CSS Transitions。
插件中精美的卡片插图来自于花瓣-发现、采集你喜欢的一切。
HTML
该3d幻灯片插件的初始html结构如下:使用一个div包含两个figures,每个figures中包含一张图片和一个包含了图片标题和描述的figcaption
<div class="fs-slider" id="fs-slider"> <figure> <img src="images/1.jpg" alt="image01" /> <figcaption> <h3>Eloquence</h3> <p>American apparel flexitarian put a bird on it, mixtape typewriter irony aesthetic. </p> </figcaption> </figure> <figure> <img src="images/2.jpg" alt="image02" /> <figcaption> <h3>Quintessential</h3> <p>Cardigan craft beer mixtape, skateboard forage fixie truffaut messenger bag. </p> </figcaption> </figure> <!-- ... --> </div>
在插件运行时,我们需要使用jQuery将html结构改为如下:
<section class="fs-container"> <div class="fs-wrapper"> <div class="fs-slider" id="fs-slider"> <div class="fs-block"> <figure style="display: block; "> <img src="images/1.jpg" alt="image01" /> <figcaption> <h3>Eloquence</h3> <p>American apparel flexitarian put a bird on it, mixtape typewriter irony aesthetic. </p> </figcaption> </figure> </div><!-- /fs-block --> <div class="fs-block"> <!-- ... --> </div> <!-- ... --> </div><!-- /fs-slider --> <nav class="fs-navigation"> <span>Previous</span> <span>Next</span> </nav> </div><!-- /fs-wrapper --> </section><!-- /fs-container -->
每一个figure都被包装到class为fs-block
的div中。
css代码和js代码请参考下载文件。