JQUERY全屏撕裂幻灯片-FULLSCREEN-SLIT-SLIDER

 查看演示  website  立即下载

fullscreen-slit-slider由 jQuery 和 css3 打造而成。为我们提供了一个全屏的撕裂效果的幻灯片，接下来我就为大家讲解以下相关的用法。

使用方法

1、下载插件包 点击下载
2、将 css 和 js两个文件夹复制到自己的网站中
3、引入以下的js和css文件

<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<script type="text/javascript" src="js/modernizr.custom.79639.js">
</script>
<noscript>
    <link rel="stylesheet" type="text/css" href="css/styleNoJS.css" />
</noscript>

=========以下内容由  LC 提供===============

加入幻灯片的主体html标签链接文字

<div id="slider" class="sl-slider-wrapper">
 
    <div class="sl-slider">
     
        <div class="sl-slide bg-1">
            <div class="sl-slide-inner">
                <div class="deco" data-icon="H"></div>
                <h2>A bene placito</h2>
                <blockquote>
                    <p>You have just dined...</p>
                    <cite>Ralph Waldo Emerson</cite>
                </blockquote>
            </div>
        </div>
         
        <div class="sl-slide bg-2">
            <div class="sl-slide-inner">
                <div class="deco" data-icon="q"></div>
                <h2>Regula aurea</h2>
                <blockquote>
                    <p>Until he extends the circle...</p>
                    <cite>Albert Schweitzer</cite>
                </blockquote>
            </div>
        </div>
 
        <div class="sl-slide bg-2">
            <!-- ... -->
        </div>
 
        <!-- ... -->
 
    </div>
 
    <nav id="nav-arrows" class="nav-arrows">
        <span class="nav-arrow-prev">Previous</span>
        <span class="nav-arrow-next">Next</span>
    </nav>
 
    <nav id="nav-dots" class="nav-dots">
        <span class="nav-dot-current"></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </nav>
 
</div>

PREVIOUS:
NEXT:
CSS3打造的手风琴-IMAGE ACCORDION WITH CSS3
有趣的动画-ABOWMAN