A fully 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.

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
regionLabel	Type: string	Default: 'carousel'	Text to use for the aria-label that is placed on the wrapper.
useGroupRole	Type: boolean	Default: true	Controls whether role="group" and an aria-label are applied to each slide.
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!

Events

All of the original events are available.

Methods

All of the original methods are available.