Drupal slick carousel

Slick is a powerful and performant slideshow/carousel solution leveraging Ken Wheeler's Slick carousel.
See http://kenwheeler.github.io/slick

Powerful: Slick is one of the sliders, as of 9/15, the only one, which supports nested sliders and a mix of lazy-loaded image/video/audio with image-to-iframe or multimedia lightbox switchers. See below for the supported media. Create a new task if no longer valid.

Performant: Slick is stored as plain HTML the first time it is requested, and then reused on subsequent requests. Carousels with cacheability and lazyload are lighter and faster than those without.

Slick has gazillion options, please start with the very basic working samples from slick_example. It is created to save everyone's time from a few basic problems and avoid adventures in the first place so you can focus more on making the most out of Slick. Be sure to read its README.txt.

Features

  • Fully responsive. Scales with its container.
  • Uses CSS3 when available. Fully functional when not.
  • Swipe enabled. Or disabled, if you prefer.
  • Desktop mouse dragging.
  • Fully accessible with arrow key navigation.
  • Built-in lazyLoad, and multiple breakpoint options.
  • Random, autoplay, pagers, arrows, dots/text/tabs/thumbnail pagers etc...
  • Works with Views, Image, Media or Field collection, or none of them.
  • Supports pure text, responsive image, responsive iframe, video, and audio carousels with aspect ratio, see samples. No extra jQuery plugin FitVids is required. Just CSS.
  • Exportable via CTools.
  • Modular and extensible skins, e.g.: Fullscreen, Fullwidth, Split, Grid or multiple row carousel.
  • Various slide layouts are built with the pure CSS goodness.
  • Nested sliders/overlays, or multiple slicks within a single Slick.
  • Modular integration with various contribs to build carousels with multimedia lightboxes or inline multimedia.
  • Media switcher: Image linked to content, Image to iframe, Image to colorbox, Image to photobox.
  • Cacheability + lazyload = light + fast.

Installation

Install the module as usual.

The README.txt is included in each sub-module for more detailed info, including troubleshooting where appropriate.

Other modules that integrate with slick

  • Intense, for viewing images on the full screen.

Optional integration

Slick supports enhancements and more complex layouts.

  • Colorbox, supports image, video, and audio displays.
  • Photobox, idem ditto.
  • Picture, to get truly responsive image.
  • Media, including Youtube, Vimeo, and Soundcloud.
  • Field Collection, to add overlay image/audio/video over the main image stage, with additional basic Scald integration for the image/video/audio overlay.
  • Color field module, or core plain text, within Field collection to colorize the slide individually.
  • Mousewheel, so it is available at:
    sites/.../libraries/mousewheel/jquery.mousewheel.min.js

Views

Slick works with Views and is available as a style plugin. Select Slick carousel as the format. Adjust the settings as needed.

Programmatically

This sample applies to Slick 1.x. For Slick 2.x, please see slick.api.php.

// Add items.
$items = array();
$items[] = array('#markup' => '');
$items[] = array('#markup' => '');
$items[] = array('#markup' => '');

// Add options.
$options = array(
  'autoplay' => TRUE,
  'dots' => TRUE,
  'arrows' => FALSE,
);

print theme('slick_carousel', array('items' => $items, 'options' => $options));

Requirements

  • Slick library:
    Download Slick archive, extract it as is, rename "slick-master" to "slick", so the needed assets are available at:
    sites/../libraries/slick/slick/slick.css
    sites/../libraries/slick/slick/slick-theme.css (optional if a skin chosen)
    sites/../libraries/slick/slick/slick.min.js
  • Blazy
  • Libraries (D7 only)
  • jQuery 1.7 (via jquery_update or jqmulti) (D7 only)
  • CTools for 2.x (D7 only)
  • jqeasing., so available at:
    sites/../libraries/easing/jquery.easing.min.js
  • A basic knowledge of Drupal site building.

Slick stable 7.x-2.0 and below requires Slick library 1.5.9 and below.
Slick DEV + D8 versions requires Slick library 1.6.0+.

Specific to D8, simply remove "sites/.." part mentioned elsewhere, so the libraries are available at, e.g.: /libraries/slick/slick/slick.min.js, etc. Slick 8.x now requires Blazy and Slick v1.6.0+. Be sure to enable Blazy prior to updating Slick to avoid requirement issues.

Important notes on updating from Slick 7.x-2.0-beta1

#2499695: Important steps before updating from beta1, otherwise broken slick.

Be sure to read the Slick 7.x-2.0-beta2 release notes for more detailed changes. One or two people confirmed a smooth update. No more scary update.
Updating Slick library to Slick 1.5+, regular clearing cache and running /update.php should suffice.
Supporting organizations: 
Initial development

Project Information

Downloads