Slick extras
Provides extra carousel skins, example configurations, and development tools for the Slick carousel module.
slick_extras
Install
composer require 'drupal/slick_extras:^2.0'
Overview
Slick Extras is a companion module for the Slick carousel module that provides additional visual skins, sample configurations, and development utilities. The module is designed to help developers learn how to use Slick effectively and to provide ready-to-use visual themes for carousels.
The main module provides six additional carousel skins with custom CSS styling including 3D effects, boxed layouts, rounded images, and vertical tab navigation. Two submodules are included: Slick Development for debugging and testing the Slick library, and Slick Example for providing comprehensive sample configurations including multiple optionsets, image styles, and Views blocks.
This module is primarily intended for learning and development purposes. The example configurations demonstrate various Slick carousel patterns including asNavFor (thumbnail navigation), carousels, fullscreen slideshows, grid layouts, and split views.
Features
- Six additional carousel skins: 3D back, Boxed, Box carousel, Box split, Rounded, and VTabs with custom CSS animations and layouts
- Development submodule with options to switch between minified and unminified versions of the Slick library for debugging
- Example submodule with nine pre-configured optionsets demonstrating different carousel patterns (Main, Carousel, Fullscreen, Grid, Overlay, Split, Slick for, Slick nav, VTabs)
- Seven pre-built Views blocks showcasing asNavFor multi-value, asNavFor single, asNavFor split, carousel, fullscreen, grid, and main configurations
- Six image styles optimized for Slick carousels (slick, slick_fullscreen, slick_lighbox, slick_rectangle, slick_square, slick_thumbnail)
- Plugin-based skin architecture extending SlickSkinPluginBase for easy customization
- Responsive optionset configurations with breakpoint-specific settings
Use Cases
Learning Slick carousel implementation
Use the Slick Example submodule to understand how to configure Slick carousels. Install the submodule after creating required image fields, then examine the pre-configured optionsets at /admin/config/media/slick and the Views at /admin/structure/views. Clone these configurations to create your own custom carousels.
Applying 3D carousel effects
Enable the Slick Extras module and select the 'X 3d back' skin when configuring your Slick display. This skin adds a 3D perspective effect with the focal point at the back, working best with centerMode enabled and 3 slidesToShow. The adjacent slides rotate outward with CSS 3D transforms.
Creating boxed carousel with margins
Use the 'X Boxed' or 'X Box carousel' skin for carousels that need margins and padding around slides. These skins reveal arrows at the sides and add card-like styling with borders and hover effects. Ideal for product or content carousels where each item needs visual separation.
Building vertical thumbnail navigation
Apply the 'X VTabs' skin to create a vertical tabs-like thumbnail navigation for your main carousel. This creates a side panel with vertical scrolling thumbnails, perfect for product galleries or portfolios where you want persistent thumbnail navigation.
Debugging Slick carousel issues
Enable the Slick Development submodule and configure it at /admin/config/media/slick/devel. Toggle 'Enable development mode' to use unminified Slick library code, or use 'Replace the slick.load.js with development version' to debug the Drupal integration layer with console logging and viewport debugging information.
Creating asNavFor synchronized carousels
Examine the x_slick_for and x_slick_nav optionsets provided by Slick Example. These demonstrate how to create synchronized carousels where clicking a thumbnail in one carousel navigates the main carousel. The Views blocks 'Block: asNavFor Multi-value field', 'Block: asNavFor Single', and 'Block: asNavFor Split' show different implementation patterns.
Tips
- Do not override the example samples directly. Clone them instead so you can update the module later without losing your changes. Use Views UI Clone and Slick optionset Clone features.
- Do not recreate from scratch - clone instead. Many steps and options are not fully documented, and cloning saves significant time even for experienced Views users.
- Uninstall the Slick Example module in production. It serves only as examples with no real functionality. However, it is safe to keep if you forget to uninstall.
- Always disable cache during development work on Slick configurations, otherwise changes may not be visible.
- For grid layouts, ensure the total number of Views results is greater than the visible slides setting, otherwise the grid may appear broken.
- When using the Grid skin, set slidesToShow, Rows and slidesPerRow to 1 and let the module handle the grid via CSS Foundation b-grid.
Technical Details
Admin Pages 1
/admin/config/media/slick/devel
Configure development and debugging options for the Slick carousel. This page allows developers to switch between production and development versions of the Slick library for testing and debugging purposes.
Hooks 2
hook_library_info_alter
Implemented by slick_devel module to alter the Slick library definitions based on development settings, allowing switching between minified and unminified versions.
hook_help
Implemented by slick_example module to display the README.md content on the module's help page.
Troubleshooting 4
Ensure the image fields 'field_image' (single value) and 'field_images' (multi-value/unlimited) exist on at least one content type before attempting to install the Slick Example submodule. These fields are required by the Views configuration.
Ensure you have content with images in the field_images field. Generate test content using Devel generate module. Place the Slick X: Views blocks at a wide region and verify the Views filter settings at /admin/structure/views/view/slick_x/edit.
Skins are permanently cached. Clear all caches via /admin/config/development/performance or use drush cr to see newly added skins from this or other modules.
The sample Views include Body text as captions. If your Body text contains HTML, it may be incorrectly chopped causing layout issues. Adjust the Views field settings to properly handle HTML or remove the Body text field from the display.