@patternslib/patternslib/src/pat/carousel/documentation.md

Patternslib is a JavaScript library that enables designers to build rich interactive prototypes without the need for writing any Javascript. All events are triggered by classes and other attributes in the HTML, without abusing the HTML as a programming la

## Description

The carousel pattern allows for displaying more content in the same amount of screen estate by letting users click or swipe through through slices of content.

## Documentation

Patterns builds on the slick library
[Slick](http://kenwheeler.github.io/slick/)
(licensed under LGPL 3) to provide a very simple way to create
carousels. Just by adding a `pat-carousel` class to your markup you can
turn anything into a beautiful carousel.

Carousels usually use an unordered list to define all panels:

    <ul class="pat-carousel">
      <li><img title="Panel 1"/></li>
      <li><img title="Panel 2"/></li>
      <li><img title="Panel 3"/></li>
    </ul>

This is not required though: any element can be used as container and
for panels. For example using a sequence of divs in a section:

    <section class="pat-carousel">
      <div>
        <h2>This is panel 1</h2>
        <p>....</p>
      </div>
      <div>
        <h2>This is panel 2</h2>
        <p>....</p>
      </div>
    </section>

There are no restrictions on the content that you use in a panels: you
can use images, videos, or any other HTML content.

Any links in the page that point directly to a panel will cause the
carousel to jump to the linked panel when clicked.

    <ul class="pat-carousel">
      <li id="intro"><img title="Panel 1"/></li>
      <li id="frontpage"><img title="Panel 2"/></li>
      <li id="reports"><img title="Panel 3"/></li>
    </ul>

    <p>As you can see in the <a href="#reports">reports screenshot</a>
     AcmeReports(TM) can generate beautiful reports.</p>

Such links will automatically get a `current` class when the panel they
are pointing to is displayed.

### Lazy loading

The carousel supports lazy loading. To use this simply give your images
a `data-src` attribute. When a panel is about to be displayed the
carousel will move all `data-src` attributes to `src`

    <ul class="pat-carousel">
      <li><img data-src="images/img1.jpg/></li>
      <li><img data-src="images/img2.jpg/></li>
    </ul>

### Customizing behaviour

The default carousel is quite spartan. You can customize it through
options in the `data-pat-carousel` attribute.

    <ul class="pat-carousel" data-pat-carousel="loop: false; control-arrows: true;">
      <li><img title="Panel 1"/></li>
      <li><img title="Panel 2"/></li>
      <li><img title="Panel 3"/></li>
    </ul>

| Property         | Description                                                                                         | Default | Allowed Values  | Type                             |
| ---------------- | --------------------------------------------------------------------------------------------------- | ------- | --------------- | -------------------------------- |
| auto-play        | …                                                                                                   | false   | true, false     | Boolean                          |
| auto-play-speed  | …                                                                                                   | 1000    |                 | Integer                          |
| slides-to-scroll | …                                                                                                   | 1       |                 | Integer                          |
| slides-to-show   |                                                                                                     | 3       |                 | Integer                          |
| dots             | …                                                                                                   | show    | show, hide      | One of the allowed string values |
| speed            | …                                                                                                   | 500     |                 | Integer                          |
| height           | Enables adaptive height for single slide horizontal carousels.                                      | fixed   | fixed, adaptive | One of the allowed string values |
| arrows           | Prev/Next Arrows                                                                                    | show    | show, hide      | One of the allowed string values |
| append-dots      | Change where the navigation dots are attached (Selector, htmlString, Array, Element, jQuery object) |         |                 | CSS selector                     |
| infinite         | Infinite loop sliding                                                                               | false   | true, false     | Boolean                          |