Slick Carousel | Cynosure Design System

Overview

Slick Carousel (v1.8.1) is the primary slider library for the Cynosure Design System. It is initialized via the shared js/components/default-slider.js utility for standard sliders, and via dedicated files for specialized variants.

Standard sliders

The default-slider.js utility handles three common slider variants. To use one in a template, add the appropriate class to the slider container:

Class	Dots	Arrows	Notes
`.js-default-slider`	Yes	Yes (hidden on mobile)	Adaptive height below 768px and 992px
`.js-default-slider-alt`	No	No	Minimal; no controls
`.js-default-slider-alt-adaptive`	No	No (hidden on mobile)	Adaptive height on smaller breakpoints

Importing the utility

In your block's script.js:

JavaScript

/**
 * Banner Block
 *
 * Rotating image/text carousel for the page banner area.
 *
 * @shared default-slider
 *   Trigger: .js-default-slider
 *   Config: dots=true, responsive adaptive height below 992px
 *
 * @see /guidelines/javascript/slick
 * @see /guidelines/javascript/shared-utilities
 */
import '../../js/components/default-slider.js';

Specialized slider utilities

For sliders that need a custom configuration beyond the standard presets, dedicated utility files exist:

File	Trigger	Used by
`article-card-slider.js`	`.js-article-card-slider`	posts-featured
`carousel-content.js`	`.js-carousel-content`	before-after
`cta-columns-slider.js`	`.js-cta-columns-slider`	cta-columns blocks
`showcase-slider.js`	`.eb-js-showcase-slider`	product-showcase
`ticker-slider.js`	`.js-ticker-slider`	ticker/marquee blocks
`video-carousel.js`	`.js-video-carousel`	video carousel blocks

RTL support

All Slick instances check $("html").attr("dir") and set rtl: true automatically when the page direction is right-to-left. This is built into all Cynosure slider utilities.

Adding a new slider

If you need a slider configuration that does not match any existing variant:

Add the appropriate class to your Handlebars template:

Handlebars

<div class="js-my-slider">
  {{#each properties.slides}}
  <div class="my-slider__slide">
    <img src="{{this.image.url}}" alt="{{this.image.alt}}">
  </div>
  {{/each}}
</div>

Write a dedicated utility or add to your block's script.js:

JavaScript

import $ from 'jquery';
import 'slick-carousel';

$(function () {
  if ($('.js-my-slider').length) {
    $('.js-my-slider').slick({
      dots: true,
      slidesToShow: 3,
      responsive: [
        {
          breakpoint: 992,
          settings: { slidesToShow: 2 },
        },
        {
          breakpoint: 576,
          settings: { slidesToShow: 1, arrows: false },
        },
      ],
    });
  }
});

Accessibility notes

Slick generates aria-label attributes for navigation buttons but these may need custom labels in your template using the prevArrow / nextArrow config options.
Ensure the slider container has an appropriate aria-label or aria-roledescription if the default is not descriptive enough.
Add prefers-reduced-motion handling via autoplay: false by default; only enable autoplay when the content requires it.