Internet Search

Slick Carousel

Slick Carousel 

If want to integration with paragraphs, we can use Slick Paragraphs 

Source / more detail: https://www.drupal.org/project/slick

Slick is a powerful and performant slideshow/carousel solution

Tutorial:

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 onlyBlazy

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/ tabsjust provide Thumbnail caption, and leave Thumbnail style/image empty to achieve this or that
    • thumbnails