Slick Slider

Slick Slider

The Slick Slider block is a responsive, mobile-friendly image slider with tons of configurable options.


Adding the Slider

The Slick Slider block is added to your page the same way as any core block. Once the block has been added to an available area you can start to build your slides and configure the settings. There are 3 tabs; Slides, Settings & Color


Adding a Slide

The default tab is set to ‘Slides’, this is where you add your slides. For each new slide:

  1. Click Add Slide
  2. Click Edit next to the slide
  3. Select an image
  4. Add some content (optional)


Settings

Once you have finished adding all of your slides, click the ‘Settings’ tab at the top. You can now configure the various settings. Each setting has a default which means changing these is optional:

  • Accessibility
    Enables/Disables tabbing and arrow key navigation
  • Adaptive Height
    Enables/Disables adaptive height for single slide horizontal carousels
  • Autoplay
    Enables/Disables Autoplay
  • Autoplay Speed
    Autoplay Speed in milliseconds
  • Arrows
    Enables/Disables Prev/Next Arrows
  • Center Mode
    Enables/Disables centered view with partial prev/next slides
  • Center Padding
    Side padding when in center mode (px)
  • CSS Ease
    CSS3 Animation Easing
  • Dots
    Enables/Disables dot indicators
  • Draggable
    Enables/Disables mouse dragging
  • Fade
    Enables/Disables fade. Default is ‘Slide’
  • Focus On Select
    Enables/Disables focus on selected element (click)
  • Infinite
    Enables/Disables Infinite loop sliding
  • Pause On Hover
    Enables/Disables Pause Autoplay On Hover
  • Pause On Dots Hover
    Enables/Disables Pause Autoplay when a dot is hovered
  • Slides To Show
    # of slides to show
  • Slides To Scroll
    # of slides to scroll
  • Speed
    Slide/Fade animation speed
  • Swipe
    Enables/Disables swiping
  • Swipe To Slide
    Enables/Disables users to drag or swipe directly to a slide irrespective of slidesToScroll
  • Touch Move
    Enables/Disables slide motion with touch
  • Variable Width
    Enables/Disables variable width slides
  • Vertical
    Enables/Disables vertical slide mode


Color

To further enhance your branding the Slick Slider block allows you to change the color of the various elements. To change the color, click the ‘color’ tab from the top of the add/edit dialogue.

  • Background Color
    Set the slider background color
  • Arrow Color
    Set the arrow navigation color
  • Dot Color
    Set the dot navigation color
  • Dot Active Color
    Set the dot active navigation color