A highly accessible, WCAG 2.0 / 2.1 compliant, drop-in replacement for Slick Slider (1.8.1) crafted and tested by expert users and professional accessibility consultants, intended to make life easier for real-world dev teams who need to pass accessibility audits.

Features

All of the same great features as the original Slick package, along with:

• The wrapper now has a role="region" and a clear, configurable aria-label.
• Each slide has role="group" with a numbered aria-label.
• Autoplay now automatically comes with a pause/play toggle button.
• No more tab markup! Just simple, semantic elements like lists and buttons.
• The accessibility setting has been deprecated since this package is accessible by default!
• Keyboard navigation has been removed so that screen reader users don't have to fight their virtual cursor!
• The Previous and Next buttons now use clean, semantic markup. Say goodbye to those aria-labels!
• Screen-reader-only instructions can now be added to explain complex behaviors to screen reader users.
• A new, more accessible theme is now available (accessible-slick-theme.min.css), which comes with bigger icons and better, browser-default focus indicators! It's used by all the demos below.
• When centerMode is enabled, the centered slide will be indicated with the text " (centered)" at the end of its aria-label.

Read more about all of these features here!

---

Demos

Single Item

$('.single-item').slick();

---

Multiple Items

$('.multiple-items').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3
});

---

Responsive Display

$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

---

Variable Width

$('.variable-width').slick({
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  centerMode: true,
  variableWidth: true
});

NOTE: starting in Slick v1.8.1, variable slide widths cannot be defined directly on individual slides using the style attribute as shown in the original demo. Instead, set the width of the inner content, like so (or via external CSS):

<div class="slider variable-width">
  <div>
    <p style="width: 200px;">200</p>
  </div>
  ..
</div>

---

Adaptive Height

$('.adaptive-height').slick({
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  adaptiveHeight: true
});

---

Data Attribute Settings

In slick 1.5+ you can now add settings using the data-slick attribute. You still need to call $(element).slick() to initialize slick on the element.

<div data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

---

Center Mode

$('.center').slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        dots: true,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        dots: true,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});

---

Lazy Loading

// To use lazy loading, set a data-lazy attribute
// on your img tags and leave off the src. Don't
// forget that alt description!

<img data-lazy="img/lazyfonz1.png" alt="[image description here]">

$('.lazy').slick({
  lazyLoad: 'ondemand',
  slidesToShow: 3,
  slidesToScroll: 1
});

---

Autoplay

$('.autoplay').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
});

In accessible-slick, a pause/play icon button is automatically added when autoplay is enabled in order to comply with WCAG 2.2.2.

---

Fade

$('.fade').slick({
  dots: true,
  infinite: true,
  speed: 500,
  fade: true,
  cssEase: 'linear'
});

---

Add & Remove

$('.add-remove').slick({
  slidesToShow: 3,
  slidesToScroll: 3
});

$('.js-add-slide').on('click', function() {
  slideIndex++;
  $('.add-remove').slick('slickAdd','
' + slideIndex + '
');
});

$('.js-remove-slide').on('click', function() {
  $('.add-remove').slick('slickRemove',slideIndex - 1);
  if (slideIndex !== 0){
    slideIndex--;
  }
});

---

Filtering

$('.filtering').slick({
  slidesToShow: 4,
  slidesToScroll: 4
});

var filtered = false;

$('.js-filter').on('click', function(){
  if (filtered === false) {
    $('.filtering').slick('slickFilter',':even');
    $(this).text('Unfilter Slides');
    filtered = true;
  } else {
    $('.filtering').slick('slickUnfilter');
    $(this).text('Filter Slides');
    filtered = false;
  }
});

---

Destroy

If you really want to be that guy...

$('.your-slider').slick('unslick');

---

Slider Syncing

 $('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav',
  instructionsText: 'Changing this current slide of this carousel will change the current slide of the thumbnail carousel that follows.',
  regionLabel: 'main image carousel'
});

$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  instructionsText: 'Changing the current slide of this carousel will change the current slide of the preceding main image carousel.',
  regionLabel: 'thumbnail carousel'
});

---

Right to Left

$('.single-item-rtl').slick({
  rtl: true
});

Note: the HTML tag of the slider, or the parent element of the slider, must have the attribute dir="rtl".

---

Settings

With just a few important exceptions, all of the original settings are still available. Additionally, the following new settings are also now available:

Setting	Type	Default	Description
arrowsPlacement	Type: string ('beforeSlides' | 'afterSlides' | 'split')	Default: null	Determines where the previous and next arrows are placed in the slider DOM, which determines their tabbing order. Arrows can be placed together before the slides or after the slides, or split so that the previous arrow is before the slides and the next arrow is after (this is the default). Use this setting to ensure the tabbing order is logical based on your visual design to fulfill WCAG 1.3.2 and 2.4.3
instructionsText	Type: string	Default: null	Instructions for screen reader users placed at the very beginning of the slider markup. If you are using asNavFor or adding custom functionality with API methods/events, you probably need to supply instructions!
pauseIcon	Type: string (html | jQuery selector) | object (DOM node | jQuery object)	Default: <span class="slick-pause-icon" aria-hidden="true"></span>	Custom element to use as the "pause" icon inside the autoplay pause/play toggle button, when autoplay is enabled.
playIcon	Type: string (html | jQuery selector) | object (DOM node | jQuery object)	Default: <span class="slick-play-icon" aria-hidden="true"></span>	Custom element to use as the "play" icon inside the autoplay pause/play toggle button, when autoplay is enabled.
regionLabel	Type: string	Default: 'carousel'	Text to use for the aria-label that is placed on the wrapper.
useAutoplayToggleButton	Type: boolean	Default: true	Controls whether a pause/play icon button is added when autoplay is enabled. Setting this to false without providing an alternative control would likely violate WCAG 2.2.2, so be careful!
useGroupRole	Type: boolean	Default: true	Controls whether role="group" and an aria-label are applied to each slide.

Events

All of the original events are available.

Methods

All of the original methods are available.