The provided demo contains various Slick carousel examples with various skins for various usages. Ready to ride a carousel? Browse for more related Slick carousel examples, and check out what Slick has to offer.

With Media file and its supported sub-modules (Drupal 7: Youtube, Vimeo, or Soundcloud), or Slick media (Drupal 8), building richer slick slideshow/ carousel contents with a mix of text, image and video has never been easier.

Most slick examples are built out using Slick Views. As Slick is integrated very well with Drupal core fields, you can build Slick slideshows or carousels using regular core Image, Media entity, Paragraphs, or Field collection (D7 only) fields just as well.

Hightlight features

  • Ultra responsive. Scales along with its container.
  • Uses CSS3 when available. Simply functional when not.
  • Swipe enabled. Or disabled, if you like.
  • Desktop mouse dragging.
  • Fully accessible with arrow key navigation.
  • Built-in lazyLoad along with multiple breakpoint options configurable per optionset.
  • Random, autoplay, asnavfors, pagers, etc...
  • Works with Views, core Image, Media, Paragraphs or Field collection, or none of them.
  • Works with text, responsive image/ picture, responsive iframe, video, and audio carousels. Its responsiveness is managed with aspect ratio, check out samples. No extra jQuery plugin FitVids is needed. Just CSS.
  • Exportable via CTools, Features, or core config exporters.
  • Extremely modular and extensible skins, e.g.: Fullscreen, Fullwidth, Newsticker, Tabs, Split, Grid, or multiple-row carousel.
  • Lotsa slide layouts are built with CSS goodness, even the 3d carousels.
  • Nested sliders/ overlays, or multiple carousels, within a particular Slick.
  • Either multimedia lightboxes, or inline multimedia, you name it.
  • A simple media switcher for some enhancement: linked to content, iframe, lightboxes: Colorbox, Photobox, PhotoSwipe.
  • Cacheability + lazyload = light + fast.
  • Navigation/ pager options:
    • arrows
    • dots, comes with a few flavors: circle dots, dots as static grid thumbnails, and dots with hoverable thumbnails, and around 10 more unique dot skins.
    • text/ tabs, just provide Thumbnail caption, and leave Thumbnail style/image empty to achieve this or that
    • thumbnails

 

Slick carousel examples

The provided demo contains skins and samples.

You can use and apply any of the provided new skins to any Slick formatter or Slick views.
Be sure to clear cache if you don't see new skins. It is highly cached.

Those skins are applicable to any Slick formatter:
https://drupal.org/project/slick
https://drupal.org/project/slick_paragraphs
https://drupal.org/project/slick_media
https://drupal.org/project/slick_views
https://drupal.org/project/slick_extras

Please read the project homepage and their README.txt for more details.

Once you install new skins, you just need to install one of your expected formatters mentioned above depending on complexity of your needs, follow their instructions and select relevant skins from any skin-related options: Skin main, Skin thumbnail, Skin arrows and Skin dots. Four skin options are available for granular and modular controls without dumping all CSS at one place.

That is it.

Those provided samples are just basic to get up and running quickly. For more advanced fields, simply match the sample options to any Slick formatter, and you should be good.

If you only want Slick for 'images" an sich within Paragraphs or Media entities, no need for Slick Paragraphs nor Slick Media modules. Just use core Slick image formatters as usual.

You only need "Slick Paragraphs" or "Slick Media" if you have more complex needs with more complex layouts and slide components. But for simple images, core Slick will do even within Paragraphs.

Any any rate using Slick Views always gives you more controls for the markups, placements, contextual filters, and other Views goodness.