jqueryflickity触摸屏的响应式幻灯片插件

共19个文件

jpg：5个

css：4个

js：3个

触摸屏幻灯片

5星 · 超过95%的资源需积分: 13 83 浏览量 2016-09-07 14:45:08 上传评论收藏 433KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

201501291605.zip （19个子文件）

201501291605

css

default.css 5KB

flickity-docs.css 13KB

normalize.css 2KB

flickity.css 2KB

img

sample-04.jpg 68KB

sample-05.jpg 125KB

sample-03.jpg 66KB

sample-02.jpg 55KB

sample-01.jpg 52KB

fonts

icomoon.woff 5KB

icomoon.svg 10KB

icomoon.eot 5KB

icomoon.ttf 5KB

index.html 33KB

flickity.pkgd.min.js 39KB

flickity.pkgd.js 101KB

flickity-docs.min.js 41KB

jQuery之家.url 268B

readme.html 865B

<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery适合移动设备触摸屏的响应式幻灯片插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/default.css"> <link rel="stylesheet" href="css/flickity-docs.css" media="screen" />  </head> <body> <div class="container"> <header class="htmleaf-header"> <h1>jQuery适合移动设备触摸屏的响应式幻灯片插件 <span>A Touch, responsive, flickable galleries</span></h1> <div class="htmleaf-links"> <a class="htmleaf-icon icon-home" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a> <a class="htmleaf-icon icon-arrow-right3" href="http://www.htmleaf.com/jQuery/Slideshow-Scroller/201501291294.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a> </div> </header> <div class="hero-gallery js-flickity"> <div class="hero-gallery__cell hero-gallery__cell--1"> <div class="content-wrap"> <h1>Flickity beta</h1> <p class="tagline">Touch, responsive, flickable galleries</p> </div> </div> <div class="hero-gallery__cell hero-gallery__cell--2"> <div class="content-wrap"> <p class="slogan slogan--easy">Easy to use.</p> <p class="slogan slogan--fun">Fun to flick.</p> <p class="slogan slogan--tagline">Flickity makes galleries, sliders, & carousels that feel lively and effortless.</p> </div> </div> <div class="hero-gallery__cell hero-gallery__cell--3"> <div class="content-wrap"> <ul class="feature-list"> <li>Physics-based animation</li> <li>Touch enable</li> <li>Responsive styling</li> <li>Full-feature API</li> </ul> </div> </div> <div class="hero-gallery__cell hero-gallery__cell--4"> <div class="content-wrap"> <p class="by-line by-line--made">Made by <b>Metafizzy</b>.</p> <p class="by-line by-line--you">You make the things that matter.</p> <p class="by-line by-line--we">We make the widgets.</p> </div> </div> </div> <div class="main"> <div class="content-wrap"> <h2>Cell style</h2> <p>All sizing and styling of the cells are handled by your own CSS.</p> <div class="example"> <div class="example__code"> <pre><code class="css"><span class="comment">/* cells will take up entire width of container */</span> <span class="class">.gallery-cell</span> <span class="rules">{ <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">100%</span></span></span>; <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">140px</span></span></span>; <span class="rule">}</span></span> </code></pre> </div> <div class="example__demo"> <div class="gallery js-flickity"> <div class="gallery-cell"></div> <div class="gallery-cell"></div> <div class="gallery-cell"></div> <div class="gallery-cell"></div> <div class="gallery-cell"></div> </div> </div> </div> <div class="example"> <div class="example__code"> <pre><code class="css"><span class="comment">/* half-width cells with margin */</span> <span class="class">.gallery-cell</span> <span class="rules">{ <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">50%</span></span></span>; <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">140px</span></span></span>; <span class="rule"><span class="attribute">margin-right</span>:<span class="value"> <span class="number">10px</span></span></span>; <span class="rule">}</span></span> </code></pre> </div> <div class="example__demo"> <div class="gallery half-width-margin js-flickity"> <div class="gallery-cell"></div> <div class="gallery-cell"></div> <div class="gallery-cell"></div> <div class="gallery-cell"></div> <div class="gallery-cell"></div> </div> </div> </div> <p>Cells can be different sizes. You can use any unit you like: percent, pixels, etc.</p> <div class="example"> <div class="example__code"> <pre><code class="css"><span class="class">.gallery-cell</span> <span class="rules">{ <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">33%</span></span></span>; <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">140px</span></span></span>; <span class="rule"><span class="attribute">margin-right</span>:<span class="value"> <span class="number">10px</span></span></span>; <span class="rule">}</span></span> <span class="class">.gallery-cell</span><span class="class">.size-180</span> <span class="rules">{ <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">180px</span></span></span>; <span class="rule">}</span></span> <span class="class">.gallery-cell</span><span class="class">.size-large</span> <span class="rules">{ <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">75%</span></span></span>; <span class="rule">}</span></span> </code></pre> </div> <div class="example__demo"> <div class="gallery various-size js-flickity"> <div class="gallery-cell"></div> <div class="gallery-cell size-180"></div> <div class="gallery-cell size-large"></div> <div class="gallery-cell"></div> <div class="gallery-cell size-large"></div> </div> </div> </div> <p>You can use media queries to show different number of cells for different breakpoints.</p> <pre><code class="css"><span class="class">.gallery-cell</span> <span class="rules">{ <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">100%</span></span></span>; <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">140px</span></span></span>; <span class="rule"><span class="attribute">margin-right</span>:<span class="value"> <span class="number">2%</span></span></span>; <span class="rule">}</span></span> <span class="at_rule">@<span class="keyword">media</span> screen and ( min-width: <span class="number">768px</span></span>; ) <span class="rules">{ <span class="comment">/* show 2 cells for larger devices */</span> <span class="rule"><span class="attribute">.gallery-cell { width</span>:<span class="value"> <span class="number">49%</span></span></span>; <span class="rule">}</span></span> } </code></pre> <div class="gallery media-queried js-flickity"> <div class="gallery-cell"></div> <div class="gallery-cell"></div> <div class="gallery-cell"></div> <div class="gallery-cell"></div> <div class="gallery-cell"></div> </div> <h2>Previous & next buttons</h2> <p>Style and position previous & next buttons with CSS.</p> <div class="example"> <div class="example__code"> <pre><code class="css"><span class="comment">/* big buttons, no circle */</span> <span class="class">.flickity-prev-next-button</span> <span class="rules">{ <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">100px</span></span></span>; <span class="

评论收藏

内容反馈