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. Read more.

Slick was feared and bullied for those options. Fear not, bully not, Slick is almost always 1300% (yes, not 1.3% or 13%) lighter and 100% faster than regular solutions out of the box with just Drupal cache. Read more.

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.
  • PhotoSwipe via Blazy, 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 is chosen)
    sites/../libraries/slick/slick/slick.min.js
  • Blazy (D8 only)
  • Libraries (D7 only)
  • jQuery 1.7 (via jquery_update or jqmulti) (D7 only)
  • CTools for 2.x (D7 only). Only core CTools is needed. If Views installed, CTools is already installed.
  • 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. See update SOP if trouble.

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

#2499695: Important steps before updating from beta1, otherwise broken slick.
Updating Slick library to Slick 1.5+, clearing cache and running /update.php suffice.

Supporting organizations: 
Initial development

Project Information

Downloads