{{#extend "layout-docs"}}

  {{#replace "pageTitle"}}Carousel{{/replace}}

  {{#replace "main"}}
    <section id="blocks-carousel" class="grid--fluid">
      <h2>Carousel</h2>
      <h3>Default carousel</h3>
      {{> carousel}}
      <pre class="code--debug"><code class="language-html">{{> carousel-src}}</code></pre>
      <h3>Carousel with custom settings</h3>
      {{> carousel-custom}}
      <pre class="code--debug"><code class="language-html">{{> carousel-custom-src}}</code></pre>
      <pre class="code--debug"><code class="language-js">$(document).ready(function() {
  var customCarouselConfig = {
    carousel:'[data-js=carousel-custom]',
    carouselSlide:'[data-js=carousel-slide-custom]',
    carouselItem:'[data-js=carousel-item-custom]',
    mediumVisible:1,
    largeVisible:2,
    hasDots: true,
    prevArrow:'&lt;a href="#" class="icon icon--left-black carousel__prev-next carousel__prev"&gt;prev&lt;/a&gt;',
    nextArrow:'&lt;a href="#" class="icon icon--right-black carousel__prev-next carousel__next"&gt;prev&lt;/a&gt;'
  };
  $.pfCarousel.init(customCarouselConfig);
});</code></pre>
      <h3>Introduction</h3>
      <p>
        Collects a list of related content into a single line of scrollable items. The number of items shown will change depending on the width of the carousel's context.
        These settings, amongst other things can be changed on the fly by passing a custom config object when calling <code>$.pfCarousel.init(config)</code>. The config object is defined below.
      </p>

      <h3>Browser compatibility</h3>
      <p>
        The carousel leverages <code>Object.assign</code>, which is not supported natively by <em>Internet Explorer 11 and lower</em>. If support for these browsers is required, include a reference to <code>polyfills/object.assign.js</code>
      </p>

      <h3>HTML usage</h3>
      <table class="table--debug">
        <tr>
          <th>Attribute</th>
          <th>Description</th>
          <th>Required?</th>
        </tr>

        <tr>
          <td>
            <p><code>[data-js=carousel]</code></p>
            <p>and <code>.carousel</code></p>
          </td>
          <td>Placed on outer-most tag that will contain the carousel.</td>
          <td>CSS class required. Data attribute is required if using the default <code>carousel</code> config setting.</td>
        </tr>

        <tr>
          <td><code>.carousel--lean</code></td>
          <td>Placed on <code>.carousel</code> tag to give it leaner styling (no background and less visual padding).</td>
          <td>CSS class required. Data attribute is required if using the default <code>carousel</code> config setting.</td>
        </tr>

        <tr>
          <td>
            <p><code>[data-js=carousel-slide]</code></p>
            <p>and <code>.carousel__slide</code></p>
          </td>
          <td>Placed on the tag whose immediate children represent the carousel items.</td>
          <td>CSS class required. Data attribute is required if using the default <code>carouselSlide</code> config setting.</td>
        </tr>

        <tr>
          <td>
            <p><code>[data-js=carousel-item]</code></p>
            <p>and <code>.carousel__item</code></p>
          </td>
          <td>Placed on the tags that represent each of the carousel items.</td>
          <td>CSS class required. Data attribute is required if using the default <code>carouselItem</code> config setting.</td>
        </tr>

        <tr>
          <td><code>.carousel__tile</code></td>
          <td>Placed on the immediate child tag of carousel items to make each item's dimensions into a visible tile (currently in the form of a light grey background).</td>
          <td>Optional</td>
        </tr>

      </table>

      <h3>Carousel config</h3>
      <p>The following attributes are added to the configuration object when initialising the carousel.</p>
      <table class="table--debug">
        <tr>
          <th>Attribute</th>
          <th>Description</th>
          <th>Default value</th>
        </tr>

        <tr>
          <td>
            <p><code>carousel: $selector</code></p>
          </td>
          <td><p>The outermost HTML hook on which the carousel will be constructed.</p></td>
          <td><code>[data-js=carousel]</code></td>
        </tr>
        <tr>
          <td>
            <p><code>carouselSlide: $selector</code></p>
          </td>
          <td><p>The carousel slider wrapper.</p></td>
          <td><code>[data-js=carousel-slide]</code></td>
        </tr>
        <tr>
          <td>
            <p><code>carouselItem: $selector</code></p>
          </td>
          <td><p>The selector for each item within a carousel.</p></td>
          <td><code>[data-js=carousel-item]</code></td>
        </tr>
        <tr>
          <td>
            <p><code>startVisible: number</code></p>
          </td>
          <td><p>The number of items needed for the carousel to trigger.</p></td>
          <td><code>1</code></td>
        </tr>
        <tr>
          <td>
            <p><code>smallVisible: number</code></p>
          </td>
          <td><p>The number of items displayed at the breakpoint defined by <code>$.pfConstants.breakpoints.small</code>.</p></td>
          <td><code>2</code></td>
        </tr>
        <tr>
          <td>
            <p><code>mediumVisible: number</code></p>
          </td>
          <td><p>The number of items displayed at the breakpoint defined by <code>$.pfConstants.breakpoints.medium</code>.</p></td>
          <td><code>3</code></td>
        </tr>
        <tr>
          <td>
            <p><code>largeVisible: number</code></p>
          </td>
          <td><p>The number of items displayed at the breakpoint defined by <code>$.pfConstants.breakpoints.large</code>.</p></td>
          <td><code>4</code></td>
        </tr>
        <tr>
          <td>
            <p><code>xlargeVisible: number</code></p>
          </td>
          <td><p>The number of items displayed at the breakpoint defined by <code>$.pfConstants.breakpoints.xlarge</code>.</p></td>
          <td><code>4</code></td>
        </tr>
        <tr>
          <td>
            <p><code>fullVisible: number</code></p>
          </td>
          <td><p>The number of items displayed at the breakpoint defined by <code>$.pfConstants.breakpoints.full</code>.</p></td>
          <td><code>4</code></td>
        </tr>
        <tr>
          <td>
            <p><code>initialised: className</code></p>
          </td>
          <td><p>The class name added to the <code>carousel</code> element when the carousel is initialised.</p></td>
          <td><code>'is-carousel'</code></td>
        </tr>
        <tr>
          <td>
            <p><code>hasDots: boolean</code></p>
          </td>
          <td><p>Flags whether dots should be displayed to indicate the number of available panes.</p></td>
          <td><code>false</code></td>
        </tr>
        <tr>
          <td>
            <p><code>infinite: boolean</code></p>
          </td>
          <td><p>Flags whether panes should automatically wrap around or stop when at the end.</p></td>
          <td><code>true</code></td>
        </tr>
        <tr>
          <td>
            <p><code>prevArrow: '&lt;element&gt;...&lt;/element&gt;'</code></p>
          </td>
          <td><p>The markup used to for the previous panel arrow button.</p></td>
          <td>
            <code><pre>
&lt;a href="#"
 class="icon icon--left-white carousel__prev-next carousel__prev"&gt;
    prev
&lt;/a&gt;
            </pre></code>
          </td>
        </tr>
        <tr>
          <td>
            <p><code>nextArrow: '&lt;element&gt;...&lt;/element&gt;'</code></p>
          </td>
          <td><p>The markup used to for the next panel arrow button.</p></td>
          <td>
            <code><pre>
&lt;a href="#"
 class="icon icon--right-white carousel__prev-next carousel__next"&gt;
    next
&lt;/a&gt;
            </pre></code>
          </td>
        </tr>
      </table>

    </section>
  {{/replace}}

{{/extend}}