The slider uses a plugin called Slick. It uses JavaScript for interactivity and animation. It also uses a number of classes to target different elements within the slider and different states of the slide. For example, a class "slick-active" is added to all slides which are currently visible. 

You can use the classes that slick provides to add additional styling to your slides when the user interacts with the slider. This is an advanced task for experienced users or front-end developers. To apply these classes, add them as Modifiers within your Custom styles.

Slide navigation style

The following style can be applied to the navigation button

• .slick-next - Class applied to the next slide navigation button
• .slick-prev - Class applied to the previous navigation button
• slick-disabled - Class applied to the navigation button when no more slides. This only applies when loop is not enabled.

Slide element classes

The following classes are available on the Slide element. These are useful if you want to style slides when the user interacts with the slider.

• .slick-slide - plugin class added to each slide
• .slick-current - plugin class added to current/focused slide
• .slick-active - class applied to each visible slide
• .slick-cloned - class applied to a clone slide. Cloned slides are created before and after actual slides when looping is enabled, in order to provide a seamless transition between beginning and end
• .slick-center - class applied to centred slide, if centerMode is enabled.

Slider container element classes

The following classes are available on the Slider container. These should only be used if you understand the impact of doing so.

• .coh-slider-container - Top-level outer container <div> for the slider
• .coh-slider-nav-top - Container <div> for slider navigation that’s positioned above the slider
• .coh-slider-nav-bottom - Container <div> for slider navigation that's positioned below the slider
• .coh-slider-container-mid - First-level outer container <div> for the slider. Target element class for slider navigation positioned top and bottom around slider
• .coh-slider-container-inner - Main container <div> for the slider
• .slick-slider - plugin class added to main slider container
• .slick-loading: plugin class added to ‘coh-slider-container-inner’ element while loading
• .slick-initialized - plugin class added to ‘coh-slider-container-inner’ element when loaded
• .slick-vertical - plugin class added to ‘coh-slider-container-inner’ element when vertical display is enabled
• .slick-dotted - plugin class added to ‘coh-slider-container-inner’ element if pagination is enabled
• .coh-slider-nav-inner-top - Container <div> for slider navigation that’s positioned inside the slider (top and middle)
• .slick-list - plugin class added to child <div> container of main slider container. If enabled, centerMode left/right padding is applied to this element
• .draggable - plugin class that enables slides to be dragged
• .slick-track - Container <div> that surrounds all slide items. It is to this element that inline styles are applied through JS, for plugin transition effects.

Classes used by slider elements

Slider container element classes

The following classes are available on the Slider container. These should only be used if you understand the impact of doing so.

• .coh-slider-container - Top-level outer container <div> for the slider
• .coh-slider-nav-top - Container <div> for slider navigation that’s positioned above the slider
• .coh-slider-nav-bottom - Container <div> for slider navigation that's positioned below the slider
• .coh-slider-container-mid - First-level outer container <div> for the slider. Target element class for slider navigation positioned top and bottom around slider
• .coh-slider-container-inner - Main container <div> for the slider
• .slick-slider - plugin class added to main slider container
• .slick-loading: plugin class added to ‘coh-slider-container-inner’ element while loading
• .slick-initialized - plugin class added to ‘coh-slider-container-inner’ element when loaded
• .slick-vertical - plugin class added to ‘coh-slider-container-inner’ element when vertical display is enabled
• .slick-dotted - plugin class added to ‘coh-slider-container-inner’ element if pagination is enabled
• .coh-slider-nav-inner-top - Container <div> for slider navigation that’s positioned inside the slider (top and middle)
• .slick-list - plugin class added to child <div> container of main slider container. If enabled, centerMode left/right padding is applied to this element
• .draggable - plugin class that enables slides to be dragged
• .slick-track - Container <div> that surrounds all slide items. It is to this element that inline styles are applied through JS, for plugin transition effects.