Goizueta Style Guide

Slick Pager

The pager used in Slick carousels.

Use the following within the .slick() JS invocation:

$('element', context).not('.slick-initialized').slick({
  appendArrows: $('.slick-pager'),
  appendDots: $('.slick-pager'),
  dots: true
});

Markup Details

                            {{ attach_library('goizueta_theme/slick-pager') }}

<section class="slick-pager">
  <button
    class="slick-prev slick-arrow"
    aria-label="Previous"
    type="button"
    style="">Previous
  </button>
  <button
    class="slick-next slick-arrow"
    aria-label="Next"
    type="button"
    style="">Next
  </button>
  <ul class="slick-dots" role="tablist" style="">
    <li class="slick-active" role="presentation"><button type="button" role="tab" id="slick-slide-control00" aria-controls="slick-slide00" aria-label="1 of 5" tabindex="0" aria-selected="true">1</button></li>
    <li role="presentation"><button type="button" role="tab" id="slick-slide-control01" aria-controls="slick-slide01" aria-label="2 of 5" tabindex="-1">2</button></li>
    <li role="presentation"><button type="button" role="tab" id="slick-slide-control02" aria-controls="slick-slide02" aria-label="3 of 5" tabindex="-1">3</button></li>
    <li role="presentation"><button type="button" role="tab" id="slick-slide-control03" aria-controls="slick-slide03" aria-label="4 of 5" tabindex="-1">4</button></li>
    <li role="presentation"><button type="button" role="tab" id="slick-slide-control04" aria-controls="slick-slide04" aria-label="5 of 5" tabindex="-1">5</button></li>
  </ul>
</section>