diff --git a/README b/README index e69de29..cc664b2 100644 --- a/README +++ b/README @@ -0,0 +1,120 @@ +Craftyslide is a tiny (just 2kb) slideshow built on jQuery. Craftyslide aims to be different, by providing a simple, no-frills method of displaying images; packaged into a small, clean and efficient plugin. + +Usage + +HTML: + +
+ +
+ +CSS: + +#slideshow { + margin:0; + padding:0; + position:relative; + border:15px solid #fff; + -webkit-box-shadow:0 3px 5px #999; + -moz-box-shadow:0 3px 5px #999; + box-shadow:0 3px 5px #999; +} + +#slideshow ul { + position:relative; + overflow:hidden; + margin:0; + padding:0; +} + +#slideshow ul li { + position:absolute; + top:0; + left:0; + margin:0; + padding:0; + list-style:none; +} + +#pagination { + clear:both; + width:100px; + margin:25px auto 0; + padding:0; +} + +#pagination li { + list-style:none; + float:left; + margin:0 2px; +} + +#pagination li a { + display:block; + width:10px; + height:10px; + text-indent:-10000px; + background:url(../images/pagination.png); +} + +#pagination li a.active { + background-position:0 10px; +} + +.caption { + width:100%; + margin:0; + padding:10px; + position:absolute; + left:0; + font-family:Helvetica, Arial, sans-serif; + font-size:14px; + font-weight:lighter; + color:#fff; + border-top:1px solid #000; + background:rgba(0,0,0,0.6); +} + +jQuery: + + + +Options +Width (number) + +Set a custom width for your slideshow. +Height (number) + +Set a custom height for your slideshow +Pagination (true/false) + +Select whether to display pagination or not. Setting to false hides pagination and enables auto mode. +fadetime (number) + +Define the fade animation speed of slides. +delay (number) + +Used during auto mode (pagination set to false). Defines the delay between each slide being shown. +Options example: + +$("#slideshow").craftyslide({ + 'width': 640, + 'height': 400, + 'pagination': false, + 'fadetime': 500, + 'delay': 2500 +}); \ No newline at end of file