Drupal Slick carousel

Provides Views style plugin for Ken Wheeler's Slick carousel.

See http://kenwheeler.github.io/slick

Slick Views module demos

Slick views adds a new display style to views called Slick carousel. Similar to how you select HTML List or Unformatted List as display styles.

This module doesn't require Views UI to be enabled but it is required if you want to configure your Views display using Slick carousel through the web interface. This ensures you can leave Views UI off once everything is setup.

Dependencies

First things first

If you haven't already, install the following to get up and running quickly. You can safely uninstall (not only disable) both later on production if you do clones.

  • The DEV release requires core Slick DEV release. The full release requires Slick full release.
  • Slick example, to avoid adventures in the first place.
  • Slick UI module, included in the main Slick module. If not, visiting Slick UI (admin/config/media/slick) will results in no such URL, and regular access denied error.

Difference between D7 and D8

For D8, Slick markups is renamed into Vanilla slick for clearer intention.
Checking Vanilla slick option has the same effect as unchecking Slick markups.

Optionsets

Arm yourself with proper optionsets. To create one, go to:

admin/config/media/slick

Usages

Go to Views UI admin/structure/views, add a new view, and a block. For any non-fields format, be sure to choose Vanilla slick so you can customize the output or markups as you see fit outside Views UI.

Usage #1

Displaying multiple (rendered) entities for the slides.

  • Choose Slick carousel under the Format.
  • For D8, check Vanilla slick. For D7, uncheck Slick markups.
  • Choose available optionsets you have created at "admin/config/media/slick"
  • Choose Rendered entity or Content under Show under Format, and its View mode.

Theming is related to their own entity display outside the Views UI.

Example use case:
- Blogs, teams, testimonials, case studies sliders, etc.

Usage #2

Displaying multiple entities using selective fields for the slides.

  • Choose Slick carousel under the Format.
  • Choose available optionsets you have created at admin/config/media/slick
  • Choose Fields under Show under Format.
  • Add fields, and do custom works or markups. If having a multi-value Image field, recommended to only display 1.

Theming is all yours inside the Views UI.

Example use case:
- similar as above.

Usage #3

Displaying a single multiple-value field in a single entity display for the slides. Use it either with contextual filter by NID, or filter criteria by NID.

  • Under Pager, choose Display a specified number of items with 1 item.
  • Choose Unformatted list under the Format, not Slick carousel.
  • Add a multi-value Image, Media or Field collection field.
  • Click the field under the Fields, choose Slick carousel under Formatter.
  • Adjust the settings.
  • Make sure to Display "all" or any number > 1 under Multiple Field settings.
  • Check Use field template under Style settings, otherwise no field visible.

Theming is mostly taken care of by slick_fields.module in terms of layout, with the goodness of Views to provide better markups manually.

Example use case:
- front or inner individual slideshow based on the entity ID, or individual user slideshow.

Usage #4

A combination of (#1 or #2) and #3 to build nested slicks.

Example use case:

  • A home slideshow containing multiple videos per slide for quick overview.
  • A large product/ portfolio slideshow containing a grid of slides.
  • A news slideshow containing latest related news items per slide.

Gotchas:

If you are choosing a single multi-value field (such as images, Media files, or Field collection fields) rather displaying various fields from multiple nodes, make sure to:

  • Choose an Unformatted list Format, not Slick carousel.
  • Choose Slick carousel for the actual field when configuring the field.
  • Check Use field template under Style Settings so that the Slick field themeing is picked-up.
    Repeat, this is only checked if using Slick field formatters with Unformatted list, not when acting as regular Image/ Blazy formaters embedded within the Slick Views style format. If confusing, just check and uncheck, clear cache and see the output, you'll know which works. This applies to any formatter, not only Slick, bear with it.

More info relevant to each option is available at their form display by hovering over them, and click a dark question mark.

Note:

Slick views was previously included in Slick 2.x till beta1, now a contrib, see #2497079: Move some sub-modules into separate projects.

Known Issues:

  • Slick Views preview only works with jQuery 1.7+. Either update the admin theme jQuery at e.g.: admin/appearance/settings/seven, or ignore preview for trivial JS compatibility errors.
  • Slick Views preview is not compatible within Overlay. The fix is available post RC3 at the main slick module: #2623396: Slick Views preview is really wide, not compatible with Overlay module
  • Slick Views Beta4 below is not compatible with Blazy 8.x-1.0-rc2. Please update both to latest RCs.

Project information

Downloads