fullscreen-slit-slider由 jQuery 和 css3 打造而成。为我们提供了一个全屏的撕裂效果的幻灯片,接下来我就为大家讲解以下相关的用法。
1、下载插件包 点击下载
2、将 css 和 js两个文件夹复制到自己的网站中
3、引入以下的js和css文件
1 2 3 4 5 6 7 8 | <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标签链接文字
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <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> |
特别申明:
本站所有资源都是由网友投稿发布,或转载各大下载站,请自行检测软件的完整性!
本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!
如有侵权请联系我们删除下架,联系方式:lei1294551502@163.com