Module Description
Provides Slick carousel samples and extra utilities demonstrating various usages of Slick carousel.
With Media file and its supported sub-modules (Youtube, Vimeo, or Soundcloud), it is easy to have richer slideshow/carousel contents with a mix of text, image and video.
Slick Carousel samples Requirements
* Blazy (for 8.x and 7.x-3.x)
* Slick Views
* 7.x-3.x: Slick Fields, included in Slick carousel
Versions
* 8.x-1.0-rc6+ for D9 - D10
* 8.x-1.0-rc5+ requires Blazy 2.5+, to support Native Grid here.
* 8.x-1.0-rc4 is the last version for D8, with any branch, below Blazy 2.5
Specific for D8 users, you can set strict constraints at your composer.json to 8.x-1.0-rc4 at most to avoid errors during update. The sample contents are essentially the same, only new features are added at later versions which most likely break compatibility.
Installation Specific to D8 up, these fields must exist before enabling the Slick Example:
* field_image, already in Standard profile
* field_images, needs creating
Create a new content type, e.g.: "Slideshow", or use the existing type, and add/ re-use 2 image fields with these machine names, then enable the module.
→ Read more
Troubleshooting Having trouble with installation? Please checkout solutions, credits to them:
* Example Slideshows not Showing
* Slick Example can't be installed due to unmet dependencies
* More troubleshooting
WARNING! Migration/ Upgrading from Slick Extras 2.x to 3.x is NOT supported, yet. → Read more.
Skins as a plugins Only supported at 8.x-1.0-rc3+, should still work cross-branches for both Slick 8.x-1.x or 8.x-2.x. Adding Slick skins has never been modular and easier. Read more.
Samples included
* Block: 3d back, a very simple 3d carousel with CSS only,
* Block: main, to have basic overlay/caption over the main stage,
* Block: asnavfor, carousel with thumbnail navigation,
* Block: carousel, multiple visible slides at a time,
* Block: fullscreen, to have full screen slider,
* Block: grid, to build a Grid carousel, or multiple row carousel.
Quick steps Assumed Slick Example, Image and Devel generate modules are already installed, If not, please install and enable them at "admin/modules".
Visit the following pages:
* admin/structure/types/add Create a dummy content type, say "Slideshow", or use an existing one. Hit "Save and add fields", landed to #2 page.
* admin/structure/types/manage/slideshow/fields Add/ re-use two field types of image named exactly as below for now. Drupal will auto-prefix it with field_:
* Image (single value, machine name field_image), already created at Standard profile.
* Images (multiple values, machine name field_images), needs creating.
* Later can be Media file, Field collection, etc.
* admin/config/development/generate/content Generate "Slideshow" contents. To have a working Grid sample, generate at least 13 - 24.
* admin/structure/block Place the Slick Example Views blocks, prefixed with "Slick X:", at any wide region at a particular testing page, and see your slicks there.
Enjoy!
To learn more about Slick, go to:
* admin/structure/views Find "Slick Example", and hit "Edit" or "Clone", and make it yours. Only "Block: grid" is expecting "Image" from "Article". The rest expect field "Images". Adjust, and change anything.
* admin/structure/types/manage/slideshow/display Find "Images" and add a formatter "Slick Carousel" under "Format". Play with anything and see the changes at its full page.
Be sure to disable "Cache" option during work, otherwise no changes are visible. Use the pattern with different field names and paths to any fieldable entity later for more complex needs.
Slow steps The Slick Example is just providing basic samples of the Slick usage:
* Several optionsets prefixed with "X" available at "admin/config/media/slick". Clone what is needed, and make them disabled, or uninstalled later.
* Several Views blocks available at "admin/structure/views". Clone it and make it yours, adjust anything accordingly.
* Several slick image styles at "admin/config/media/image-styles". Re-create own styles, and adjust the sample Views accordingly after cloning.
Requirements clarification Adjust content type to any fieldable entity: node, user, paragraphs, Media, FC, etc.
* field_image, as available on Article content type of Standard install.
* field_images, must be created before seeing this example useful immediately.
* node/3 containing field_images for D7. While D8 expect the latest node to have images.
See "admin/reports/fields" for the list of your fields.
Manage fields To create the new field "Images":
* Go to: admin/structure/types Choose any "Manage fields" of the expected content type, for easy test try Article where a single Image is installed by default. Basic page is fine too. Or do both.
* Add new field: Images (without "field_" as Drupal prefixes it automatically)
* Select a field type: Image
* Save, and follow the next screen. Be sure to choose "Unlimited" for the "Number of values".
You can also do the similar steps with any fieldable entity:
* admin/structure/field-collections
* admin/structure/paragraphs
* admin/config/people/accounts/fields
* etc.
All requirements may be adjusted to available instances, see below.
To have various slick displays, recommended to put both "field_image" and "field_images" at the same content type. This allows building nested slick or asNavFor at its very basic usage just as easily.
Later use the pattern to build more complex nested slick with video/audio via Media file fields or SCALD atom reference (7.x) when using with Field collection module.
Shortly, add, or adjust the fields manually to learn from this example.
Views collection page Adjust the example references to images accordingly at the Views edit page.
* Go to: admin/structure/views
* Edit the Slick Example Views before usage, adjust possible broken settings: admin/structure/views/view/slick_x/edit For D7, the first block depends on node ID 3 which is expected to have "field_images". For D8, all blocks are expecting the latest node to have field "field_images". admin/structure/views/view/slick_x/edit/block
If no such node ID, adjust the filter criteria to match the site node ID containing images. If no "field_images", simply change the broken reference.
Slick grid aka Multiple rows carousel Slick grid is expected to have at least 12 visible images per slide.
Be sure to have at least 13 visible images/ nodes with image, or so, to see a working Grid which results in at least 2 rows of grids per slide.
Change the numbers later once all is set, and get a grasp of it.
To create Slick grid, or multiple rows carousel, there are 3 options:
* One row grid managed by library: Visit admin/config/media/slick, Edit current optionset, and set slidesToShow > 1, and Rows and slidesperRow = 1
* Multiple rows grid managed by library: Visit admin/config/media/slick, Edit current optionset, and set slidesToShow = 1, Rows > 1 and slidesPerRow > 1
* Multiple rows grid managed by Module: Visit admin/structure/views/view/slick_x/edit/block_grid from slick_example. Be sure to install the Slick example sub-module first. Requires skin "Grid", and set slidesToShow, Rows and slidesPerRow = 1.
The first 2 are supported by core library using pure JS approach. The last is the Module feature using pure CSS Foundation block-grid. The key is: The total amount of Views results must be bigger than Visible slides, otherwise broken Grid.
Read more See slick_example.module file for more exploration on available hooks.
Note
* If Skin main is left empty, no module CSS will be loaded. You are on your own. Unless your CSS is very advanced, recommended to choose a Skin as it contains several core fixes. Then do overrides using regular hook_css_alter(), stylesheets[] directives, or the provided hooks to any of the module CSS. Skins are never assumed final, but starters, and they may not always meet your needs.
* These modules were previously included in Slick 2.x till beta1, now contrib, see #2497079: Move some sub-modules into separate projects
More troubleshooting
* Skins are permanently cached. If you don't see newly added skins, either yours, or this module's, be sure to clear cache.
* The provided samples contain Body text as captions. If your Body text has HTML, it may be chopped incorrectly, causing broken layouts. Adjust the Views settings to support HTML, or remove the Body text if unsure.
This module contains sub-modules:
* Slick development
* Slick example
With Media file and its supported sub-modules (Youtube, Vimeo, or Soundcloud), it is easy to have richer slideshow/carousel contents with a mix of text, image and video.
Slick Carousel samples Requirements
* Blazy (for 8.x and 7.x-3.x)
* Slick Views
* 7.x-3.x: Slick Fields, included in Slick carousel
Versions
* 8.x-1.0-rc6+ for D9 - D10
* 8.x-1.0-rc5+ requires Blazy 2.5+, to support Native Grid here.
* 8.x-1.0-rc4 is the last version for D8, with any branch, below Blazy 2.5
Specific for D8 users, you can set strict constraints at your composer.json to 8.x-1.0-rc4 at most to avoid errors during update. The sample contents are essentially the same, only new features are added at later versions which most likely break compatibility.
Installation Specific to D8 up, these fields must exist before enabling the Slick Example:
* field_image, already in Standard profile
* field_images, needs creating
Create a new content type, e.g.: "Slideshow", or use the existing type, and add/ re-use 2 image fields with these machine names, then enable the module.
→ Read more
Troubleshooting Having trouble with installation? Please checkout solutions, credits to them:
* Example Slideshows not Showing
* Slick Example can't be installed due to unmet dependencies
* More troubleshooting
WARNING! Migration/ Upgrading from Slick Extras 2.x to 3.x is NOT supported, yet. → Read more.
Skins as a plugins Only supported at 8.x-1.0-rc3+, should still work cross-branches for both Slick 8.x-1.x or 8.x-2.x. Adding Slick skins has never been modular and easier. Read more.
Samples included
* Block: 3d back, a very simple 3d carousel with CSS only,
* Block: main, to have basic overlay/caption over the main stage,
* Block: asnavfor, carousel with thumbnail navigation,
* Block: carousel, multiple visible slides at a time,
* Block: fullscreen, to have full screen slider,
* Block: grid, to build a Grid carousel, or multiple row carousel.
Quick steps Assumed Slick Example, Image and Devel generate modules are already installed, If not, please install and enable them at "admin/modules".
Visit the following pages:
* admin/structure/types/add Create a dummy content type, say "Slideshow", or use an existing one. Hit "Save and add fields", landed to #2 page.
* admin/structure/types/manage/slideshow/fields Add/ re-use two field types of image named exactly as below for now. Drupal will auto-prefix it with field_:
* Image (single value, machine name field_image), already created at Standard profile.
* Images (multiple values, machine name field_images), needs creating.
* Later can be Media file, Field collection, etc.
* admin/config/development/generate/content Generate "Slideshow" contents. To have a working Grid sample, generate at least 13 - 24.
* admin/structure/block Place the Slick Example Views blocks, prefixed with "Slick X:", at any wide region at a particular testing page, and see your slicks there.
Enjoy!
To learn more about Slick, go to:
* admin/structure/views Find "Slick Example", and hit "Edit" or "Clone", and make it yours. Only "Block: grid" is expecting "Image" from "Article". The rest expect field "Images". Adjust, and change anything.
* admin/structure/types/manage/slideshow/display Find "Images" and add a formatter "Slick Carousel" under "Format". Play with anything and see the changes at its full page.
Be sure to disable "Cache" option during work, otherwise no changes are visible. Use the pattern with different field names and paths to any fieldable entity later for more complex needs.
Slow steps The Slick Example is just providing basic samples of the Slick usage:
* Several optionsets prefixed with "X" available at "admin/config/media/slick". Clone what is needed, and make them disabled, or uninstalled later.
* Several Views blocks available at "admin/structure/views". Clone it and make it yours, adjust anything accordingly.
* Several slick image styles at "admin/config/media/image-styles". Re-create own styles, and adjust the sample Views accordingly after cloning.
Requirements clarification Adjust content type to any fieldable entity: node, user, paragraphs, Media, FC, etc.
* field_image, as available on Article content type of Standard install.
* field_images, must be created before seeing this example useful immediately.
* node/3 containing field_images for D7. While D8 expect the latest node to have images.
See "admin/reports/fields" for the list of your fields.
Manage fields To create the new field "Images":
* Go to: admin/structure/types Choose any "Manage fields" of the expected content type, for easy test try Article where a single Image is installed by default. Basic page is fine too. Or do both.
* Add new field: Images (without "field_" as Drupal prefixes it automatically)
* Select a field type: Image
* Save, and follow the next screen. Be sure to choose "Unlimited" for the "Number of values".
You can also do the similar steps with any fieldable entity:
* admin/structure/field-collections
* admin/structure/paragraphs
* admin/config/people/accounts/fields
* etc.
All requirements may be adjusted to available instances, see below.
To have various slick displays, recommended to put both "field_image" and "field_images" at the same content type. This allows building nested slick or asNavFor at its very basic usage just as easily.
Later use the pattern to build more complex nested slick with video/audio via Media file fields or SCALD atom reference (7.x) when using with Field collection module.
Shortly, add, or adjust the fields manually to learn from this example.
Views collection page Adjust the example references to images accordingly at the Views edit page.
* Go to: admin/structure/views
* Edit the Slick Example Views before usage, adjust possible broken settings: admin/structure/views/view/slick_x/edit For D7, the first block depends on node ID 3 which is expected to have "field_images". For D8, all blocks are expecting the latest node to have field "field_images". admin/structure/views/view/slick_x/edit/block
If no such node ID, adjust the filter criteria to match the site node ID containing images. If no "field_images", simply change the broken reference.
Slick grid aka Multiple rows carousel Slick grid is expected to have at least 12 visible images per slide.
Be sure to have at least 13 visible images/ nodes with image, or so, to see a working Grid which results in at least 2 rows of grids per slide.
Change the numbers later once all is set, and get a grasp of it.
To create Slick grid, or multiple rows carousel, there are 3 options:
* One row grid managed by library: Visit admin/config/media/slick, Edit current optionset, and set slidesToShow > 1, and Rows and slidesperRow = 1
* Multiple rows grid managed by library: Visit admin/config/media/slick, Edit current optionset, and set slidesToShow = 1, Rows > 1 and slidesPerRow > 1
* Multiple rows grid managed by Module: Visit admin/structure/views/view/slick_x/edit/block_grid from slick_example. Be sure to install the Slick example sub-module first. Requires skin "Grid", and set slidesToShow, Rows and slidesPerRow = 1.
The first 2 are supported by core library using pure JS approach. The last is the Module feature using pure CSS Foundation block-grid. The key is: The total amount of Views results must be bigger than Visible slides, otherwise broken Grid.
Read more See slick_example.module file for more exploration on available hooks.
Note
* If Skin main is left empty, no module CSS will be loaded. You are on your own. Unless your CSS is very advanced, recommended to choose a Skin as it contains several core fixes. Then do overrides using regular hook_css_alter(), stylesheets[] directives, or the provided hooks to any of the module CSS. Skins are never assumed final, but starters, and they may not always meet your needs.
* These modules were previously included in Slick 2.x till beta1, now contrib, see #2497079: Move some sub-modules into separate projects
More troubleshooting
* Skins are permanently cached. If you don't see newly added skins, either yours, or this module's, be sure to clear cache.
* The provided samples contain Body text as captions. If your Body text has HTML, it may be chopped incorrectly, causing broken layouts. Adjust the Views settings to support HTML, or remove the Body text if unsure.
This module contains sub-modules:
* Slick development
* Slick example
Module Link
Project Usage
16920
Security Covered
Covered By Security Advisory
Version Available
Production
Module Summary
This module aims to solve the issue of providing Slick carousel samples and extra utilities demonstrating various usages of Slick carousel with media files and supported sub-modules like Youtube, Vimeo, or Soundcloud for richer slideshow/carousel contents.
Data Name
slick_extras
OPENAI CHATBOT
OPENAI CHATBOT
