Drupal slick carousel

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

Slick has gazillion options, please start with the very basic working samples from Slick Example. Spending 5 minutes will save hours in the long run.

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. Don't take our or their words for it. Prove it yourself with online tools easily. Read more.

Samples Demo

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, etc...
  • Works with Views, Image, Media or Field collection, or none of them.
  • Supports text, responsive image/ picture, responsive iframe, video, and audio carousels with aspect ratio, see samples. No extra jQuery plugin FitVids is required. Just CSS.
  • Exportable via CTools, or Features.
  • Modular and extensible skins, e.g.: Fullscreen, Fullwidth, Split, Grid, or multiple-row carousel.
  • Various slide layouts are built with CSS goodness.
  • Nested sliders/ overlays, or multiple carousels, within a single Slick.
  • Multimedia lightboxes, or inline multimedia.
  • Media switcher: linked to content, iframe, lightboxes: Colorbox, Photobox, PhotoSwipe.
  • Cacheability + lazyload = light + fast.
  • Navigation/ pager options:
    • arrows
    • dots, comes with different flavors: circle dots, dots as static grid thumbnails, and dots with hoverable thumbnails
    • text/ tabs, just provide Thumbnail caption, and leave Thumbnail style/image empty to achieve this or that
    • thumbnails

Installation

Install the module as usual.

Enhancements

Slick works with fields and Views, and supports enhancements for image, video, audio, and more complex layouts.

Optional integration

Programmatically

Check out D8 slick.api.php, or D7 slick.api.php.

Tutorials and resources

Useful resources to make the most out of Slick.

Slick DIY

If you prefer to get your hands dirty, check out excellent resources below.

PHP 7 compatibility

Slick stable 7.x-2.0 below is not compatible with PHP7. Two patches are available here.

Quick perfomance tips

  • Use lazyLoad "ondemand" / "anticipated" (v1.6.1+) for tons of images, not "progressive". Unless within an ajaxified lightbox.
  • Choose lazyload "Blazy" for carousels below the fold to delay loading them.
  • Tick "Optimized" option on the top right of Slick optionset edit page to free up some bytes.
  • Use image style with regular sizes containing effect "crop" in the name. This way all images will inherit dimensions calculated once.
  • Disable core library "slick-theme.css" as it contains font "slick" which may not be in use when using own icon font at:
    /admin/config/media/slick/ui
  • Use Blazy multi-serving images, core Responsive image (D8), or Picture (D7), accordingly.
  • Uninstall (not only disabled) Slick UI at production.
  • Enable Drupal cache, and CSS/ JS assets aggregation.

Troubleshooting

With a combination of options, Slick offers degree of flexibility to some extent. With great flexibility, comes great possibility, for better or worse. If worse, check out a few troubleshootings, known issues, and gotchas before for just in case it is already identified.

Requirements

  • Slick library:
    Download, rename "slick-master" to "slick", so the 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
  • jqeasing, so available at:
    sites/../libraries/easing/jquery.easing.min.js
    Fallback for old browsers, ignorable to use CSS3 easing alone.
  • D8 only: Blazy
  • D7 only:

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

Specific to D8, remove "sites/.." part mentioned elsewhere, so the libraries are:
/libraries/slick/slick/slick.min.js, etc.

See update SOP if trouble.

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

Updating Slick library to Slick 1.5+, clearing cache and running /update.php suffice. Read more.

Supporting organizations: 
Initial development

Project Information

Downloads