Module Description
Slick is a powerful and performant slideshow/carousel solution leveraging Ken Wheeler's Slick carousel. See http://kenwheeler.github.io/slick
Slick has a lot of options, please start with the very basic working samples from Slick Example.
Samples Demo Upgrading from 1.x to 2.x or 3+ Please refer to Blazy upgrade path. Kindly report if any issues to benefit others. No problem if just a missing info, or the module mistake. They will always inspire and help improve our docs, much easier and clearer.
Versions
* 3.x: Blazy 3.x.
* 8.x-2.x: Blazy 2.x.
* 8.x-1.x: Blazy 1.x.
* 7.x-3.x: Blazy 7.x-1.x, and a proper installation with an autoloader module, see Blazy for details. And its requirements.
Requirements
* Blazy, see Versions.
* Slick library (1.6+ and <= 1.8.0), read more: Master branch is not supported. Instead download, rename one of the official slick releases 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
Specific to D8, remove "sites/.." part mentioned elsewhere, so the libraries are: /libraries/slick/slick/slick.min.js, etc. Important! If any issues with specific number 1.8.0, be sure version in Slick package.json matches the version written in slick.js. The reason, release 1.8.1 with package.json 1.8.1 has also version 1.8.0 written in slick.js as of this writing 2021/10. If they don't match, they are not supported by this module.
* [Optional] jqeasing at: sites/../libraries/easing/jquery.easing.min.js Fallback for old browsers, ignorable to use CSS3 easing alone.
* D7 only:
* jQuery Update for jQuery 1.7+.
* CTools. If Views is installed, CTools was.
* Libraries.
Introducing a newborn kid on the box
* Slick Lightbox.
* ElevateZoom Plus.
Known working and battle-tested Slick library version is Slick 1.6.0. If any issue with the latest (1.7 - 1.8.0), stick or revert to Slick 1.6.0.
See update SOP if trouble.
Installation Manual:
Install the module as usual, more info:
* Slick 7.x-3.x fresh installation with Blazy vs. Upgrading 2.x to 3.x. Check out known issues with Slick 3.x installation. Drupal 7
* Drupal 8
Composer:
Check out Blazy (project home or /admin/help) for details.
Uninstallation Please check out below for solutions:
* Slick 7.x
* Slick 8.x+
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
Enhancements Slick works with fields and Views, and supports enhancements for image, video, audio, and more complex layouts.
Related modules
* Slick UI, can be uninstalled at production
* Slick Fields
* Slick Browser
* Slick Media
* Slick Video
* Slick Views
* Slick Entityreference
* Scald Slick
* Slick Paragraphs
* Slick Example
* Slick Lightbox
* Intense
* ElevateZoom Plus.
Optional integration
* Colorbox
* Photobox
* PhotoSwipe
* Picture
* Media: Youtube, Vimeo, Soundcloud
* Field Collection, with Media or Scald
* Color field, or core plain text, within Field collection to colorize the slide individually
* Mousewheel: sites/.../libraries/mousewheel/jquery.mousewheel.min.js
Try Slick with a distro A few composer-based D8 distros download Blazy and Slick libraries for you. Choose your favorite distro, and change MYPROJECT to your working directory accordingly.
* Lightning composer create-project acquia/lightning-project MYPROJECT
* Open Y composer create-project ymcatwincities/openy-project MYPROJECT --no-interaction --no-dev
* Presto! composer create-project sitback/presto-project MYPROJECT --stability dev --no-interaction
* Thunder composer create-project burdamagazinorg/thunder-project MYPROJECT --stability dev --no-interaction
* Varbase composer create-project Vardot/varbase-project MYPROJECT --stability dev --no-interaction
* Brainstorm profile
* Seeds
Programmatically Check out D8 slick.api.php, or D7 slick.api.php.
Tutorials and resources Useful resources to make the most out of Slick.
* How to Build Drupal Slideshow Using Views and Slick
* Style a Slick Carousel Slideshow in D8
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.
* Concerns about Slick performance? Check this out, we got a little benchmark.
Troubleshooting
* With a combination of options, Slick offers degree of flexibility to some extent. With great flexibility, comes great possibility, for better or worse, or fun with some advanced Slick examples. If worse, check out a few troubleshooting, known issues, and gotchas before for just in case it is already identified.
* If any issue with displays at D7, be sure to update your jQuery version to 1.7+.
* Any of Blazy or Slick sub-modules branch must match this module branch. 1x for 1x, 2x for 2x, etc. _only if available. DEV for DEV. Full for full release.
Submitting issues or patches Please check out this before submitting issues, or that before submitting patches.
Slick has a lot of options, please start with the very basic working samples from Slick Example.
Samples Demo Upgrading from 1.x to 2.x or 3+ Please refer to Blazy upgrade path. Kindly report if any issues to benefit others. No problem if just a missing info, or the module mistake. They will always inspire and help improve our docs, much easier and clearer.
Versions
* 3.x: Blazy 3.x.
* 8.x-2.x: Blazy 2.x.
* 8.x-1.x: Blazy 1.x.
* 7.x-3.x: Blazy 7.x-1.x, and a proper installation with an autoloader module, see Blazy for details. And its requirements.
Requirements
* Blazy, see Versions.
* Slick library (1.6+ and <= 1.8.0), read more: Master branch is not supported. Instead download, rename one of the official slick releases 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
Specific to D8, remove "sites/.." part mentioned elsewhere, so the libraries are: /libraries/slick/slick/slick.min.js, etc. Important! If any issues with specific number 1.8.0, be sure version in Slick package.json matches the version written in slick.js. The reason, release 1.8.1 with package.json 1.8.1 has also version 1.8.0 written in slick.js as of this writing 2021/10. If they don't match, they are not supported by this module.
* [Optional] jqeasing at: sites/../libraries/easing/jquery.easing.min.js Fallback for old browsers, ignorable to use CSS3 easing alone.
* D7 only:
* jQuery Update for jQuery 1.7+.
* CTools. If Views is installed, CTools was.
* Libraries.
Introducing a newborn kid on the box
* Slick Lightbox.
* ElevateZoom Plus.
Known working and battle-tested Slick library version is Slick 1.6.0. If any issue with the latest (1.7 - 1.8.0), stick or revert to Slick 1.6.0.
See update SOP if trouble.
Installation Manual:
Install the module as usual, more info:
* Slick 7.x-3.x fresh installation with Blazy vs. Upgrading 2.x to 3.x. Check out known issues with Slick 3.x installation. Drupal 7
* Drupal 8
Composer:
Check out Blazy (project home or /admin/help) for details.
Uninstallation Please check out below for solutions:
* Slick 7.x
* Slick 8.x+
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
Enhancements Slick works with fields and Views, and supports enhancements for image, video, audio, and more complex layouts.
Related modules
* Slick UI, can be uninstalled at production
* Slick Fields
* Slick Browser
* Slick Media
* Slick Video
* Slick Views
* Slick Entityreference
* Scald Slick
* Slick Paragraphs
* Slick Example
* Slick Lightbox
* Intense
* ElevateZoom Plus.
Optional integration
* Colorbox
* Photobox
* PhotoSwipe
* Picture
* Media: Youtube, Vimeo, Soundcloud
* Field Collection, with Media or Scald
* Color field, or core plain text, within Field collection to colorize the slide individually
* Mousewheel: sites/.../libraries/mousewheel/jquery.mousewheel.min.js
Try Slick with a distro A few composer-based D8 distros download Blazy and Slick libraries for you. Choose your favorite distro, and change MYPROJECT to your working directory accordingly.
* Lightning composer create-project acquia/lightning-project MYPROJECT
* Open Y composer create-project ymcatwincities/openy-project MYPROJECT --no-interaction --no-dev
* Presto! composer create-project sitback/presto-project MYPROJECT --stability dev --no-interaction
* Thunder composer create-project burdamagazinorg/thunder-project MYPROJECT --stability dev --no-interaction
* Varbase composer create-project Vardot/varbase-project MYPROJECT --stability dev --no-interaction
* Brainstorm profile
* Seeds
Programmatically Check out D8 slick.api.php, or D7 slick.api.php.
Tutorials and resources Useful resources to make the most out of Slick.
* How to Build Drupal Slideshow Using Views and Slick
* Style a Slick Carousel Slideshow in D8
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.
* Concerns about Slick performance? Check this out, we got a little benchmark.
Troubleshooting
* With a combination of options, Slick offers degree of flexibility to some extent. With great flexibility, comes great possibility, for better or worse, or fun with some advanced Slick examples. If worse, check out a few troubleshooting, known issues, and gotchas before for just in case it is already identified.
* If any issue with displays at D7, be sure to update your jQuery version to 1.7+.
* Any of Blazy or Slick sub-modules branch must match this module branch. 1x for 1x, 2x for 2x, etc. _only if available. DEV for DEV. Full for full release.
Submitting issues or patches Please check out this before submitting issues, or that before submitting patches.
Module Link
Project Usage
66964
Security Covered
Covered By Security Advisory
Version Available
Production
Module Summary
This module aims to solve the need for a powerful and performant slideshow/carousel solution by leveraging Ken Wheeler's Slick carousel library and providing various options for customization and integration with Drupal websites.
Data Name
slick
OPENAI CHATBOT
OPENAI CHATBOT
