formstone
Version:
Library of modular front end components.
1 lines • 39.3 kB
JSON
{"main":["carousel.js","carousel.css"],"options":[{"name":"autoAdvance","type":"boolean","default":"false","description":"Flag to auto advance items"},{"name":"autoHeight","type":"boolean","default":"false","description":"Flag to adjust carousel height to visible item(s)"},{"name":"autoTime","type":"int","default":"8000","description":"Auto advance time"},{"name":"contained","type":"boolean","default":"true","description":"Flag for 'overflow: visible'"},{"name":"controls","type":"boolean or object","default":"true","description":"Flag to draw controls OR object containing container, next and previous control selectors (Must be fully qualified selectors)"},{"name":"customClass","type":"string","default":"''","description":"Class applied to instance"},{"name":"fill","type":"boolean","default":"false","description":"Flag to fill viewport if item count is less then show count"},{"name":"infinite","type":"boolean","default":"false","description":"Flag for looping items"},{"name":"labels.next","type":"string","default":"'Next'","description":"Control text"},{"name":"labels.previous","type":"string","default":"'Previous'","description":"Control text"},{"name":"labels.controls","type":"string","default":"'Carousel {guid} Controls'","description":"Controls aria label; {guid} replaced with instance GUID"},{"name":"labels.pagination","type":"string","default":"'Carousel {guid} Pagination'","description":"Pagination aria label; {guid} replaced with instance GUID"},{"name":"matchHeight","type":"boolean","default":"false","description":"Flag to match item heights"},{"name":"matchWidth","type":"boolean","default":"true","description":"Flag to match item widths; Requires CSS widths if false"},{"name":"maxWidth","type":"string","default":"'Infinity'","description":"Width at which to auto-disable plugin"},{"name":"minWidth","type":"string","default":"'0'","description":"Width at which to auto-disable plugin"},{"name":"paged","type":"boolean","default":"false","description":"Flag for paged items"},{"name":"pagination","type":"boolean or string","default":"true","description":"Flag to draw pagination OR string containing pagination target selector (Must be fully qualified selector)"},{"name":"rtl","type":"boolean","default":"false","description":"Right to Left display"},{"name":"show","type":"int / object","default":"1","description":"Items visible per page; Object for responsive counts"},{"name":"single","type":"boolean","default":"false","description":"Flag to display single item at a time"},{"name":"theme","type":"string","default":"\"fs-light\"","description":"Theme class name"},{"name":"useMargin","type":"boolean","default":"false","description":"Use margins instead of css transitions (legacy browser support)"}],"events":[{"name":"itemClick.carousel","description":"Item clicked; Triggered on carousel item"},{"name":"update.carousel","description":"Carousel position updated"}],"methods":[{"name":"disable","description":"Disables instance of plugin","examples":["$(\".target\").carousel(\"disable\");"]},{"name":"enable","description":"Enables instance of plugin","examples":["$(\".target\").carousel(\"enable\");"]},{"name":"jump","description":"Jump instance of plugin to specific page; Alias of `jumpPage`","examples":["$(\".target\").carousel(\"jump\", 1);"],"params":[{"name":"index","type":"int","description":"New index"},{"name":"silent","type":"boolean","description":"Flag to prevent triggering update event"}]},{"name":"jumpItem","description":"Jump instance of plugin to specific item","examples":["$(\".target\").carousel(\"jumpItem\", 1);"],"params":[{"name":"index","type":"int","description":"New item index"},{"name":"silent","type":"boolean","description":"Flag to prevent triggering update event"}]},{"name":"jumpPage","description":"Jump instance of plugin to specific page","examples":["$(\".target\").carousel(\"jumpPage\", 1);"],"params":[{"name":"index","type":"int","description":"New index"},{"name":"silent","type":"boolean","description":"Flag to prevent triggering update event"}]},{"name":"next","description":"Move to next page; Alias of `nextPage`","examples":["$(\".target\").carousel(\"next\");"]},{"name":"nextPage","description":"Move to next page","examples":["$(\".target\").carousel(\"nextPage\");"]},{"name":"previous","description":"Move to the previous page; Alias of `previousPage`","examples":["$(\".target\").carousel(\"previous\");"]},{"name":"previousPage","description":"Move to the previous page","examples":["$(\".target\").carousel(\"previousPage\");"]},{"name":"reset","description":"Resets instance after item change","examples":["$(\".target\").carousel(\"reset\");"]},{"name":"resize","description":"Resizes instance","examples":["$(\".target\").carousel(\"resize\");"]},{"name":"update","description":"Updates carousel items","examples":["$(\".target\").carousel(\"update\", \"...\");"]}],"name":"Carousel","type":"widget","description":"A jQuery plugin for simple content carousels.","dependencies":["jQuery","core.js","mediaquery.js","touch.js"],"css":[{"name":".fs-carousel-element","type":"element","description":"Target element"},{"name":".fs-carousel","type":"element","description":"Base widget class"},{"name":".fs-carousel.fs-enabled","type":"modifier","description":"Indicates enabled state"},{"name":".fs-carousel.fs-rtl","type":"modifier","description":"Indicates right to left display"},{"name":".fs-carousel.fs-carousel-auto_height","type":"modifier","description":"Indicates auto height sizing"},{"name":".fs-carousel.fs-carousel-contained","type":"modifier","description":"Indicates overflow: hidden"},{"name":".fs-carousel.fs-carousel-single","type":"modifier","description":"Indicates single item display"},{"name":".fs-carousel-viewport","type":"element","description":"Carousel container"},{"name":".fs-carousel-wrapper","type":"element","description":"Carousel container"},{"name":".fs-carousel-container","type":"element","description":"Canister container"},{"name":".fs-carousel-canister","type":"element","description":"Item container"},{"name":".fs-carousel-canister","type":"element","description":"Item container"},{"name":".fs-carousel-item","type":"element","description":"Individual item"},{"name":".fs-carousel-controls","type":"element","description":"Controls container"},{"name":".fs-carousel-controls.fs-carousel-visible","type":"modifier","description":"Indicates visible state"},{"name":".fs-carousel-control","type":"element","description":"Control element"},{"name":".fs-carousel-control.fs-carousel-control_previous","type":"modifier","description":"Indicates previous control"},{"name":".fs-carousel-control.fs-carousel-control_next","type":"modifier","description":"Indicates next control"},{"name":".fs-carousel-control.fs-carousel-control_disabled","type":"modifier","description":"Indicates disbaled state"},{"name":".fs-carousel-pagination","type":"element","description":"Item element"},{"name":".fs-carousel-pagination.fs-carousel-visible","type":"modifier","description":"Indicates visible state"},{"name":".fs-carousel-page","type":"element","description":"Pagiantion item element"},{"name":".fs-carousel-page.fs-carousel-active","type":"modifier","description":"Indicates active state"}],"use":"### Basic\n\nCarousel will treat immediate children as items to scroll through. By default, all items will be sized to the width of the carousel.\n\n```javascript\n$(\".target\").carousel();\n```\n\n```markup\n<div class=\"target\">\n <div>1</div>\n <div>2</div>\n <div>3</div>\n <div>4</div>\n <div>5</div>\n</div>\n```\n\n### Show\n\nSet the `show` option to a value, or object, at initialization to allow more items to be visible at once. If passing an object keys should be valid `min-width` media query values, including units.\n\n```javascript\n$(\".target\").carousel({\n show: 2\n});\n```\n\n```javascript\n$(\".target\").carousel({\n show: {\n \"740px\" : 2,\n \"980px\" : 3\n }\n});\n```\n\nNote: Carousel items that don't meet jQuery's `:visible` selector requirements will not be counted as active items. This can be useful when filtering or updating a set of items.","demo":"<h3>Basic</h3>\n\n<!-- START: FIRSTDEMO -->\n\n<style>\n .carousel { border-radius: 3px; margin: 20px 0; width: 100%; }\n\n .carousel_item { background: #00bcd4; border-radius: 3px; color: #fff; font-size: 75px; height: 200px; line-height: 200px; margin: 0 0 10px 0; overflow: hidden; text-align: center; width: 100%; }\n\n .carousel_item:nth-child(even) { background: #0097A7; }\n .carousel_item img { width: 100%; }\n\n .carousel_auto_height .carousel_item:nth-child(2) { height: 300px; }\n .carousel_auto_height .carousel_item:nth-child(3) { height: 250px; }\n\n .fs-carousel-enabled.fs-carousel-ltr .carousel_item { margin: 0 10px 0 0; }\n .fs-carousel-enabled.fs-carousel-rtl .carousel_item { margin: 0 0 0 10px; }\n .fs-carousel-enabled.fs-carousel-single .carousel_item { margin: 0; }\n\n .carousel_item_wide { width: 294px; }\n .carousel_item_thin { width: 150px; }\n\n .carousel_controller .carousel_item { background: #0097A7 !important; cursor: pointer; font-size: 20px; height: 50px; line-height: 50px; }\n .carousel_controller .carousel_item.fs-carousel-active { background: #00bcd4 !important; }\n\n .carousel_fade .fs-carousel-item {\n opacity: 0;\n visibility: hidden;\n\n -webkit-transition: opacity 0s linear, visibility 0s linear;\n transition: opacity 0s linear, visibility 0s linear;\n -webkit-transition-delay: 0.25s;\n transition-delay: 0.25s;\n }\n\n .carousel_fade .fs-carousel-item.fs-carousel-visible {\n opacity: 1;\n visibility: visible;\n\n -webkit-transition-duration: 0.25s;\n transition-duration: 0.25s;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n }\n\n .custom_container {\n overflow: hidden;\n }\n .custom_container .custom_previous {\n float: left;\n margin: 0;\n }\n .custom_container .custom_next {\n float: right;\n margin: 0;\n }\n .custom_pagination {\n line-height: 38px;\n text-align: center;\n }\n .custom_pagination button {\n height: 24px;\n\n background: #00bcd4;\n border: none;\n border-radius: 2px;\n color: #fff;\n display: inline-block;\n line-height: 20px;\n margin: 0 2px;\n padding: 3px 5px;\n vertical-align: middle;\n }\n .custom_pagination button.fs-carousel-active {\n background: #0097A7;\n }\n</style>\n\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <div class=\"carousel js-carousel\" id=\"carousel_basic\">\n <div class=\"carousel_item\">1</div>\n <div class=\"carousel_item\">2</div>\n <div class=\"carousel_item\">3</div>\n <div class=\"carousel_item\">4</div>\n <div class=\"carousel_item\">5</div>\n <div class=\"carousel_item\" style=\"display: none;\">6</div>\n </div>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><div class="carousel">\n	<div>1</div>\n	<div>2</div>\n	<div>3</div>\n	<div>4</div>\n	<div>5</div>\n</div></code></pre>\n <pre><code class=\"language-javascript\">$(\".carousel\").carousel();</code></pre>\n </div>\n</div>\n\n<!-- END: FIRSTDEMO -->\n\n<h3>Paged</h3>\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <div class=\"carousel js-carousel\" data-carousel-options='{\"paged\":true,\"show\":2}'>\n <div class=\"carousel_item\">1</div>\n <div class=\"carousel_item\">2</div>\n <div class=\"carousel_item\">3</div>\n <div class=\"carousel_item\">4</div>\n <div class=\"carousel_item\">5</div>\n <div class=\"carousel_item\" style=\"display: none;\">6</div>\n </div>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><div class="carousel">\n	<div>1</div>\n	<div>2</div>\n	<div>3</div>\n	<div>4</div>\n	<div>5</div>\n</div></code></pre>\n <pre><code class=\"language-javascript\">$(\".carousel\").carousel({\n paged: true,\n show: 2\n});</code></pre>\n </div>\n</div>\n\n<h3>Uneven Counts</h3>\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <div class=\"carousel js-carousel\" data-carousel-options='{\"show\":3}'>\n <div class=\"carousel_item\">1</div>\n <div class=\"carousel_item\">2</div>\n <div class=\"carousel_item\">3</div>\n <div class=\"carousel_item\">4</div>\n <div class=\"carousel_item\">5</div>\n <div class=\"carousel_item\" style=\"display: none;\">6</div>\n </div>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><div class="carousel">\n	<div>1</div>\n	<div>2</div>\n	<div>3</div>\n	<div>4</div>\n	<div>5</div>\n</div></code></pre>\n <pre><code class=\"language-javascript\">$(\".carousel\").carousel({\n show: 3\n});</code></pre>\n </div>\n</div>\n\n<h3>Infinite</h3>\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <div class=\"carousel js-carousel\" data-carousel-options='{\"infinite\":true}'>\n <div class=\"carousel_item\">1</div>\n <div class=\"carousel_item\">2</div>\n <div class=\"carousel_item\">3</div>\n <div class=\"carousel_item\">4</div>\n <div class=\"carousel_item\">5</div>\n <div class=\"carousel_item\" style=\"display: none;\">6</div>\n </div>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><div class="carousel">\n	<div>1</div>\n	<div>2</div>\n	<div>3</div>\n	<div>4</div>\n	<div>5</div>\n</div></code></pre>\n <pre><code class=\"language-javascript\">$(\".carousel\").carousel({\n infinite: true\n});</code></pre>\n </div>\n</div>\n\n<h3>No Controls</h3>\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <div class=\"carousel js-carousel\" data-carousel-options='{\"controls\":false,\"pagination\":false}'>\n <div class=\"carousel_item\">1</div>\n <div class=\"carousel_item\">2</div>\n <div class=\"carousel_item\">3</div>\n <div class=\"carousel_item\">4</div>\n <div class=\"carousel_item\">5</div>\n <div class=\"carousel_item\" style=\"display: none;\">6</div>\n </div>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><div class="carousel">\n	<div>1</div>\n	<div>2</div>\n	<div>3</div>\n	<div>4</div>\n	<div>5</div>\n</div></code></pre>\n <pre><code class=\"language-javascript\">$(\".carousel\").carousel({\n controls: false,\n pagination: false\n});</code></pre>\n </div>\n</div>\n\n<h3>Enable at Breakpoint</h3>\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <div class=\"carousel js-carousel\" data-carousel-options='{\"minWidth\":\"740px\"}'>\n <div class=\"carousel_item\">1</div>\n <div class=\"carousel_item\">2</div>\n <div class=\"carousel_item\" style=\"display: none;\">3</div>\n </div>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><div class="carousel">\n	<div>1</div>\n	<div>2</div>\n	<div>3</div>\n	<div>4</div>\n	<div>5</div>\n</div></code></pre>\n <pre><code class=\"language-javascript\">$(\".carousel\").carousel({\n minWidth: \"740px\"\n});</code></pre>\n </div>\n</div>\n\n<h3>Responsive Counts</h3>\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <div class=\"carousel js-carousel\" data-carousel-options='{\"show\":{\"740px\":2,\"980px\":3,\"1220px\":1}}'>\n <div class=\"carousel_item\">1</div>\n <div class=\"carousel_item\">2</div>\n <div class=\"carousel_item\">3</div>\n <div class=\"carousel_item\">4</div>\n <div class=\"carousel_item\">5</div>\n <div class=\"carousel_item\" style=\"display: none;\">6</div>\n </div>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><div class="carousel">\n	<div>1</div>\n	<div>2</div>\n	<div>3</div>\n	<div>4</div>\n	<div>5</div>\n</div></code></pre>\n <pre><code class=\"language-javascript\">$(\".carousel\").carousel({\n show: {\n \"740px\": 2,\n \"980px\": 3,\n \"1220px\": 1\n }\n});</code></pre>\n </div>\n</div>\n\n<h3>Links</h3>\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <div class=\"carousel js-carousel\" data-carousel-options='{\"show\":{\"500px\":2,\"980px\":3}}'>\n <a href=\"https://spacehold.it/800x600/1.jpg\" class=\"carousel_item js-lightbox\"><img src=\"https://spacehold.it/450x400/1.jpg\" draggable=\"false\"></a>\n <a href=\"https://spacehold.it/800x600/2.jpg\" class=\"carousel_item js-lightbox\"><img src=\"https://spacehold.it/450x400/2.jpg\" draggable=\"false\"></a>\n <a href=\"https://spacehold.it/800x600/3.jpg\" class=\"carousel_item js-lightbox\"><img src=\"https://spacehold.it/450x400/3.jpg\" draggable=\"false\"></a>\n <a href=\"https://spacehold.it/800x600/4.jpg\" class=\"carousel_item js-lightbox\"><img src=\"https://spacehold.it/450x400/4.jpg\" draggable=\"false\"></a>\n <a href=\"https://spacehold.it/800x600/5.jpg\" class=\"carousel_item js-lightbox\"><img src=\"https://spacehold.it/450x400/5.jpg\" draggable=\"false\"></a>\n </div>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><div class="carousel">\n	<a href=\"1.jpg\">1</a>\n	<a href=\"2.jpg\">2</a>\n	<a href=\"3.jpg\">3</a>\n	<a href=\"4.jpg\">4</a>\n	<a href=\"5.jpg\">5</a>\n</div></code></pre>\n <pre><code class=\"language-javascript\">$(\".carousel\").carousel({\n show: 3\n});</code></pre>\n </div>\n</div>\n\n<h3>Right to Left</h3>\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <div class=\"carousel js-carousel\" data-carousel-options='{\"rtl\":true,\"show\":{\"500px\":2,\"980px\":3}}'>\n <div class=\"carousel_item\">1</div>\n <div class=\"carousel_item\">2</div>\n <div class=\"carousel_item\">3</div>\n <div class=\"carousel_item\">4</div>\n <div class=\"carousel_item\">5</div>\n </div>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><div class="carousel">\n	<div>1</div>\n	<div>2</div>\n	<div>3</div>\n	<div>4</div>\n	<div>5</div>\n</div></code></pre>\n <pre><code class=\"language-javascript\">$(\".carousel\").carousel({\n rtl: true\n});</code></pre>\n </div>\n</div>\n\n<h3>Auto Height</h3>\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <div class=\"carousel carousel_auto_height js-carousel\" data-carousel-options='{\"autoHeight\":true,\"show\":{\"500px\":2,\"980px\":3}}'>\n <div class=\"carousel_item\">1</div>\n <div class=\"carousel_item\">2</div>\n <div class=\"carousel_item\">3</div>\n <div class=\"carousel_item\">4</div>\n <div class=\"carousel_item\">5</div>\n </div>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><div class="carousel">\n	<div>1</div>\n	<div>2</div>\n	<div>3</div>\n	<div>4</div>\n	<div>5</div>\n</div></code></pre>\n <pre><code class=\"language-javascript\">$(\".carousel\").carousel({\n autoHeight: true\n});</code></pre>\n </div>\n</div>\n\n<h3>Uneven Widths</h3>\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <div class=\"carousel js-carousel\" data-carousel-options='{\"matchWidth\":false}'>\n <div class=\"carousel_item carousel_item_wide\">1</div>\n <div class=\"carousel_item carousel_item_thin\">2</div>\n <div class=\"carousel_item carousel_item_wide\">3</div>\n <div class=\"carousel_item carousel_item_thin\">4</div>\n <div class=\"carousel_item carousel_item_wide\">5</div>\n </div>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><div class="carousel">\n	<div>1</div>\n	<div>2</div>\n	<div>3</div>\n	<div>4</div>\n	<div>5</div>\n</div></code></pre>\n <pre><code class=\"language-javascript\">$(\".carousel\").carousel({\n matchWidth: false\n});</code></pre>\n </div>\n</div>\n\n<h3>Custom Controls</h3>\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <div class=\"carousel js-carousel\" data-carousel-options='{\"pagination\":\".custom_pagination\",\"controls\":{\"container\":\".custom_container\",\"next\":\".custom_next\",\"previous\":\".custom_previous\"}}'>\n <div class=\"carousel_item\">1</div>\n <div class=\"carousel_item\">2</div>\n <div class=\"carousel_item\">3</div>\n <div class=\"carousel_item\">4</div>\n <div class=\"carousel_item\">5</div>\n </div>\n <div class=\"custom_container\">\n <button class=\"button custom_previous\">◄</button>\n <button class=\"button custom_next\">►</button>\n <div class=\"custom_pagination\"></div>\n </div>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><div class="carousel">\n	<div>1</div>\n	<div>2</div>\n	<div>3</div>\n	<div>4</div>\n	<div>5</div>\n</div>\n\n<div class="controls">\n	<button class="previous">Previous</button>\n	<button class="next">Next</button>\n</div>\n\n<div class="pagination"></div></code></pre>\n <pre><code class=\"language-javascript\">$(\".carousel\").carousel({\n controls: {\n \"contain\": \".controls\",\n \"previous\": \".previous\",\n \"next\": \".next\"\n },\n pagination: \".pagination\"\n});</code></pre>\n </div>\n</div>\n\n<h3>Linked</h3>\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <div class=\"fs-row\">\n <div class=\"fs-cell fs-md-half fs-lg-7\">\n <div class=\"carousel linked_carousel js-carousel\" data-carousel-linked=\".linked_carousel\" data-carousel-options='{\"pagination\":false}'>\n <div class=\"carousel_item\">1</div>\n <div class=\"carousel_item\">2</div>\n <div class=\"carousel_item\">3</div>\n <div class=\"carousel_item\">4</div>\n <div class=\"carousel_item\">5</div>\n <div class=\"carousel_item\">6</div>\n <div class=\"carousel_item\">7</div>\n <div class=\"carousel_item\">8</div>\n <div class=\"carousel_item\">9</div>\n <div class=\"carousel_item\">10</div>\n </div>\n </div>\n <div class=\"fs-cell fs-md-half fs-lg-5\">\n <div class=\"carousel linked_carousel js-carousel\" data-carousel-linked=\".linked_carousel\" data-carousel-options='{\"pagination\":false,\"rtl\":true}'>\n <div class=\"carousel_item\">1</div>\n <div class=\"carousel_item\">2</div>\n <div class=\"carousel_item\">3</div>\n <div class=\"carousel_item\">4</div>\n <div class=\"carousel_item\">5</div>\n <div class=\"carousel_item\">6</div>\n <div class=\"carousel_item\">7</div>\n <div class=\"carousel_item\">8</div>\n <div class=\"carousel_item\">9</div>\n <div class=\"carousel_item\">10</div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><div class="carousel_1 linked" data-carousel-linked=".linked">\n	<div>1</div>\n	<div>2</div>\n	<div>3</div>\n	<div>4</div>\n	<div>5</div>\n</div>\n\n<div class="carousel_2 linked" data-carousel-linked=".linked">\n	<div>1</div>\n	<div>2</div>\n	<div>3</div>\n	<div>4</div>\n	<div>5</div>\n</div></code></pre>\n <pre><code class=\"language-javascript\">$(\".carousel_1\").carousel();\n\n$(\".carousel_2\").carousel({\n rtl: true\n});</code></pre>\n </div>\n</div>\n\n<h3>Controller</h3>\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <div class=\"carousel carousel_controller_target js-carousel\" data-carousel-options='{\"pagination\":false}'>\n <div class=\"carousel_item\">1</div>\n <div class=\"carousel_item\">2</div>\n <div class=\"carousel_item\">3</div>\n <div class=\"carousel_item\">4</div>\n <div class=\"carousel_item\">5</div>\n <div class=\"carousel_item\">6</div>\n <div class=\"carousel_item\">7</div>\n <div class=\"carousel_item\">8</div>\n <div class=\"carousel_item\">9</div>\n <div class=\"carousel_item\">10</div>\n <div class=\"carousel_item\">11</div>\n <div class=\"carousel_item\">12</div>\n <div class=\"carousel_item\">13</div>\n <div class=\"carousel_item\">14</div>\n <div class=\"carousel_item\">15</div>\n </div>\n <div class=\"carousel carousel_controller js-carousel\" data-carousel-controller-for=\".carousel_controller_target\" data-carousel-options='{\"pagination\":false,\"controls\":false,\"show\":{\"0px\":5,\"980px\":10}}'>\n <div class=\"carousel_item\">1</div>\n <div class=\"carousel_item\">2</div>\n <div class=\"carousel_item\">3</div>\n <div class=\"carousel_item\">4</div>\n <div class=\"carousel_item\">5</div>\n <div class=\"carousel_item\">6</div>\n <div class=\"carousel_item\">7</div>\n <div class=\"carousel_item\">8</div>\n <div class=\"carousel_item\">9</div>\n <div class=\"carousel_item\">10</div>\n <div class=\"carousel_item\">11</div>\n <div class=\"carousel_item\">12</div>\n <div class=\"carousel_item\">13</div>\n <div class=\"carousel_item\">14</div>\n <div class=\"carousel_item\">15</div>\n </div>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><div class="carousel_1">\n	<div>1</div>\n	<div>2</div>\n	<div>3</div>\n	<div>4</div>\n	<div>5</div>\n</div>\n\n<div class="carousel_2" data-carousel-controller-for=".carousel_1">\n	<div>1</div>\n	<div>2</div>\n	<div>3</div>\n	<div>4</div>\n	<div>5</div>\n</div></code></pre>\n <pre><code class=\"language-javascript\">$(\".carousel_1\").carousel({\n pagination: false\n});\n\n$(\".carousel_2\").carousel({\n controls: false,\n pagination: false,\n show: 5\n});</code></pre>\n </div>\n</div>\n\n<h3>Single</h3>\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <div class=\"carousel js-carousel\" data-carousel-options='{\"single\":true}'>\n <div class=\"carousel_item\">1</div>\n <div class=\"carousel_item\">2</div>\n <div class=\"carousel_item\">3</div>\n <div class=\"carousel_item\">4</div>\n <div class=\"carousel_item\">5</div>\n <div class=\"carousel_item\" style=\"display: none;\">6</div>\n </div>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><div class="carousel">\n	<div>1</div>\n	<div>2</div>\n	<div>3</div>\n	<div>4</div>\n	<div>5</div>\n</div></code></pre>\n <pre><code class=\"language-javascript\">$(\".carousel\").carousel({\n single: true\n});</code></pre>\n </div>\n</div>\n\n<h3>Single - Fade</h3>\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <div class=\"carousel carousel_fade js-carousel\" data-carousel-options='{\"single\":true}'>\n <div class=\"carousel_item\">1</div>\n <div class=\"carousel_item\">2</div>\n <div class=\"carousel_item\">3</div>\n <div class=\"carousel_item\">4</div>\n <div class=\"carousel_item\">5</div>\n <div class=\"carousel_item\" style=\"display: none;\">6</div>\n </div>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><div class="carousel">\n	<div>1</div>\n	<div>2</div>\n	<div>3</div>\n	<div>4</div>\n	<div>5</div>\n</div></code></pre>\n <pre><code class=\"language-javascript\">$(\".carousel\").carousel({\n single: true\n});</code></pre>\n <pre><code class=\"language-css\">.carousel .fs-carousel-item {\n opacity: 0;\n visibility: hidden;\n transition: opacity 0s linear, visibility 0s linear;\n transition-delay: 0.25s;\n}\n\n.carousel .fs-carousel-item.fs-carousel-visible {\n opacity: 1;\n visibility: visible;\n transition-duration: 0.25s;\n transition-delay: 0s;\n}</code></pre>\n </div>\n</div>\n\n<h3>Single - Right to Left</h3>\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <div class=\"carousel js-carousel\" data-carousel-options='{\"rtl\":true,\"single\":true}'>\n <div class=\"carousel_item\">1</div>\n <div class=\"carousel_item\">2</div>\n <div class=\"carousel_item\">3</div>\n <div class=\"carousel_item\">4</div>\n <div class=\"carousel_item\">5</div>\n </div>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><div class="carousel">\n	<div>1</div>\n	<div>2</div>\n	<div>3</div>\n	<div>4</div>\n	<div>5</div>\n</div></code></pre>\n <pre><code class=\"language-javascript\">$(\".carousel\").carousel({\n single: true,\n rtl: true\n});</code></pre>\n </div>\n</div>\n\n<h3>No Theme</h3>\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <div class=\"carousel js-carousel\" data-carousel-options='{\"theme\":\"\"}'>\n <div class=\"carousel_item\">1</div>\n <div class=\"carousel_item\">2</div>\n <div class=\"carousel_item\">3</div>\n <div class=\"carousel_item\">4</div>\n <div class=\"carousel_item\">5</div>\n <div class=\"carousel_item\" style=\"display: none;\">6</div>\n </div>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><div class="carousel">\n	<div>1</div>\n	<div>2</div>\n	<div>3</div>\n	<div>4</div>\n	<div>5</div>\n</div></code></pre>\n <pre><code class=\"language-javascript\">$(\".carousel\").carousel({\n theme: \"\"\n});</code></pre>\n </div>\n</div>\n","document":"# Carousel\n\nA jQuery plugin for simple content carousels.\n\n<!-- HEADER END -->\n\n<!-- NAV START -->\n\n* [Use](#use)\n* [Options](#options)\n* [Events](#events)\n* [Methods](#methods)\n* [CSS](#css)\n\n<!-- NAV END -->\n\n<!-- DEMO BUTTON -->\n\n<a name=\"use\"></a>\n\n## Using Carousel\n\n\n#### Main\n\n```markup\ncarousel.js\ncarousel.css\n```\n\n\n#### Dependencies\n\n```markup\njQuery\ncore.js\nmediaquery.js\ntouch.js\n```\n\n### Basic\n\nCarousel will treat immediate children as items to scroll through. By default, all items will be sized to the width of the carousel.\n\n```javascript\n$(\".target\").carousel();\n```\n\n```markup\n<div class=\"target\">\n <div>1</div>\n <div>2</div>\n <div>3</div>\n <div>4</div>\n <div>5</div>\n</div>\n```\n\n### Show\n\nSet the `show` option to a value, or object, at initialization to allow more items to be visible at once. If passing an object keys should be valid `min-width` media query values, including units.\n\n```javascript\n$(\".target\").carousel({\n show: 2\n});\n```\n\n```javascript\n$(\".target\").carousel({\n show: {\n \"740px\" : 2,\n \"980px\" : 3\n }\n});\n```\n\nNote: Carousel items that don't meet jQuery's `:visible` selector requirements will not be counted as active items. This can be useful when filtering or updating a set of items.\n\n\n<a name=\"options\"></a>\n\n## Options\n\nSet instance options by passing a valid object at initialization, or to the public `defaults` method. Custom options for a specific instance can also be set by attaching a `data-carousel-options` attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `autoAdvance` | `boolean` | `false` | Flag to auto advance items |\n| `autoHeight` | `boolean` | `false` | Flag to adjust carousel height to visible item(s) |\n| `autoTime` | `int` | `8000` | Auto advance time |\n| `contained` | `boolean` | `true` | Flag for 'overflow: visible' |\n| `controls` | `boolean or object` | `true` | Flag to draw controls OR object containing container, next and previous control selectors (Must be fully qualified selectors) |\n| `customClass` | `string` | `''` | Class applied to instance |\n| `fill` | `boolean` | `false` | Flag to fill viewport if item count is less then show count |\n| `infinite` | `boolean` | `false` | Flag for looping items |\n| `labels.next` | `string` | `'Next'` | Control text |\n| `labels.previous` | `string` | `'Previous'` | Control text |\n| `labels.controls` | `string` | `'Carousel {guid} Controls'` | Controls aria label; {guid} replaced with instance GUID |\n| `labels.pagination` | `string` | `'Carousel {guid} Pagination'` | Pagination aria label; {guid} replaced with instance GUID |\n| `matchHeight` | `boolean` | `false` | Flag to match item heights |\n| `matchWidth` | `boolean` | `true` | Flag to match item widths; Requires CSS widths if false |\n| `maxWidth` | `string` | `'Infinity'` | Width at which to auto-disable plugin |\n| `minWidth` | `string` | `'0'` | Width at which to auto-disable plugin |\n| `paged` | `boolean` | `false` | Flag for paged items |\n| `pagination` | `boolean or string` | `true` | Flag to draw pagination OR string containing pagination target selector (Must be fully qualified selector) |\n| `rtl` | `boolean` | `false` | Right to Left display |\n| `show` | `int / object` | `1` | Items visible per page; Object for responsive counts |\n| `single` | `boolean` | `false` | Flag to display single item at a time |\n| `theme` | `string` | `\"fs-light\"` | Theme class name |\n| `useMargin` | `boolean` | `false` | Use margins instead of css transitions (legacy browser support) |\n\n<hr>\n<a name=\"events\"></a>\n\n## Events\n\nEvents are triggered on the target instance's element, unless otherwise stated.\n\n| Event | Description |\n| --- | --- |\n| `itemClick.carousel` | Item clicked; Triggered on carousel item |\n| `update.carousel` | Carousel position updated |\n\n<hr>\n<a name=\"methods\"></a>\n\n## Methods\n\nMethods are publicly available to all active instances, unless otherwise stated.\n\n### disable\n\nDisables instance of plugin\n\n```javascript\n$(\".target\").carousel(\"disable\");\n```\n\n### enable\n\nEnables instance of plugin\n\n```javascript\n$(\".target\").carousel(\"enable\");\n```\n\n### jump\n\nJump instance of plugin to specific page; Alias of `jumpPage`\n\n```javascript\n$(\".target\").carousel(\"jump\", 1);\n```\n\n#### Parameters\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `index` | `int` | | New index |\n| `silent` | `boolean` | | Flag to prevent triggering update event |\n\n### jumpItem\n\nJump instance of plugin to specific item\n\n```javascript\n$(\".target\").carousel(\"jumpItem\", 1);\n```\n\n#### Parameters\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `index` | `int` | | New item index |\n| `silent` | `boolean` | | Flag to prevent triggering update event |\n\n### jumpPage\n\nJump instance of plugin to specific page\n\n```javascript\n$(\".target\").carousel(\"jumpPage\", 1);\n```\n\n#### Parameters\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `index` | `int` | | New index |\n| `silent` | `boolean` | | Flag to prevent triggering update event |\n\n### next\n\nMove to next page; Alias of `nextPage`\n\n```javascript\n$(\".target\").carousel(\"next\");\n```\n\n### nextPage\n\nMove to next page\n\n```javascript\n$(\".target\").carousel(\"nextPage\");\n```\n\n### previous\n\nMove to the previous page; Alias of `previousPage`\n\n```javascript\n$(\".target\").carousel(\"previous\");\n```\n\n### previousPage\n\nMove to the previous page\n\n```javascript\n$(\".target\").carousel(\"previousPage\");\n```\n\n### reset\n\nResets instance after item change\n\n```javascript\n$(\".target\").carousel(\"reset\");\n```\n\n### resize\n\nResizes instance\n\n```javascript\n$(\".target\").carousel(\"resize\");\n```\n\n### update\n\nUpdates carousel items\n\n```javascript\n$(\".target\").carousel(\"update\", \"...\");\n```\n\n<hr>\n<a name=\"css\"></a>\n\n## CSS\n\n| Class | Type | Description |\n| --- | --- | --- |\n| `.fs-carousel-element` | `element` | Target element |\n| `.fs-carousel` | `element` | Base widget class |\n| `.fs-carousel.fs-enabled` | `modifier` | Indicates enabled state |\n| `.fs-carousel.fs-rtl` | `modifier` | Indicates right to left display |\n| `.fs-carousel.fs-carousel-auto_height` | `modifier` | Indicates auto height sizing |\n| `.fs-carousel.fs-carousel-contained` | `modifier` | Indicates overflow: hidden |\n| `.fs-carousel.fs-carousel-single` | `modifier` | Indicates single item display |\n| `.fs-carousel-viewport` | `element` | Carousel container |\n| `.fs-carousel-wrapper` | `element` | Carousel container |\n| `.fs-carousel-container` | `element` | Canister container |\n| `.fs-carousel-canister` | `element` | Item container |\n| `.fs-carousel-canister` | `element` | Item container |\n| `.fs-carousel-item` | `element` | Individual item |\n| `.fs-carousel-controls` | `element` | Controls container |\n| `.fs-carousel-controls.fs-carousel-visible` | `modifier` | Indicates visible state |\n| `.fs-carousel-control` | `element` | Control element |\n| `.fs-carousel-control.fs-carousel-control_previous` | `modifier` | Indicates previous control |\n| `.fs-carousel-control.fs-carousel-control_next` | `modifier` | Indicates next control |\n| `.fs-carousel-control.fs-carousel-control_disabled` | `modifier` | Indicates disbaled state |\n| `.fs-carousel-pagination` | `element` | Item element |\n| `.fs-carousel-pagination.fs-carousel-visible` | `modifier` | Indicates visible state |\n| `.fs-carousel-page` | `element` | Pagiantion item element |\n| `.fs-carousel-page.fs-carousel-active` | `modifier` | Indicates active state |\n\n"}