Slick is a powerful and performant slideshow/carousel solution leveraging Ken
Wheeler's Slick carousel.
See http://kenwheeler.github.io/slick
Slick has gazillion options, please start with the very basic working
samples from slick_example only if trouble to build slicks. Be sure to read
its README.txt. Spending 5 minutes or so will save you hours in building more
complex slideshows.
The module supports Slick 1.6 above.
Slick 2.x is just out 9/21/15, and hasn't been officially supported now, 9/27.
Important! Enable Blazy first before updating Slick Alphas,
otherwise a requirement error.
Install the module as usual, more info can be found on:
http://drupal.org/documentation/install/modules-themes/modules-7
The Slick module has several sub-modules:
Slick supports enhancements and more complex layouts.
To create optionsets, go to:
admin/config/media/slick
Enable Slick UI sub-module first, otherwise regular "Access denied".
They will be available at field formatter "Manage display", and Views UI.
Slick works with Views and as field display formatters.
Slick Views is available as a style plugin included at slick_views.module.
Slick field formatter included as a plugin which supports core: Image, Text.
See slick.api.php for samples.
Nested slick is a parent Slick containing slides which contain individual child
slick per slide. The child slicks are basically regular slide overlays like
a single video over the large background image, only with nested slicks it can
be many videos displayed as a slideshow as well.
Use Slick Paragraphs or Views to build one.
Supported multi-value fields for nested slicks: Image, Text, VEF, Media entity.
The main purpose of skins are to demonstrate that often some CSS lines are
enough to build fairly variant layouts. No JS needed. Unless, of course, for
more sophisticated slider like spiral 3D carousel which is beyond what CSS can
do. But more often CSS will do.
Skins allow swappable layouts like next/prev links, split image or caption, etc.
with just CSS. However a combination of skins and options may lead to
unpredictable layouts, get yourself dirty. Use the provided samples to see
the working skins.
Some default complex layout skins applied to desktop only, adjust for the mobile
accordingly. The provided skins are very basic to support the necessary layouts.
It is not the module job to match your awesome design requirements.
- None
It is all about DIY.
Doesn't load any extra CSS other than the basic styles required by slick.
Skins at the optionset are ignored, only useful to fetch description and
your own custom work when not using the sub-modules, nor plugins.
If using individual slide layout, do the layouts yourself.
- Classic
Adds dark background color over white caption, only good for slider (single
slide visible), not carousel (multiple slides visible), where small captions
are placed over images, and animated based on their placement.
- Full screen
Works best with 1 slidesToShow. Use z-index layering > 8 to position elements
over the slides, and place it at large regions. Currently only works with
Slick fields, use Views to make it a block. Use Slick Paragraphs to
have more complex contents inside individual slide, and assign it to Slide
caption fields.
- Full width
Adds additional wrapper to wrap overlay video and captions properly.
This is designated for large slider in the header or spanning width to window
edges at least 1170px width for large monitor. To have a custom full width
skin, simply prefix your skin with "full", e.g.: fullstage, fullwindow, etc.
- Split
Caption and image/media are split half, and placed side by side. This requires
any layout containing "split", otherwise useless.
- Grid
Only reasonable if you have considerable amount of slides.
Uses the Foundation 5.5 block-grid, and disabled if you choose your own skin
not named Grid. Otherwise overrides skin Grid accordingly.
Requires:
Visible slides, Skin Grid for starter, A reasonable amount of slides,
Optionset with Rows and slidesPerRow = 1.
Avoid variableWidth and adaptiveHeight. Use consistent dimensions.
This is module feature, older than core Rows, and offers more flexibility.
Available at slick_views, and configurable via Views UI.
If you want to attach extra 3rd libraries, e.g.: image reflection, image zoomer,
more advanced 3d carousels, etc, simply put them into js array of the target
skin. Add proper weight, if you are acting on existing slick events,
normally < 0 (slick.load.min.js) is the one.
Use hook_slick_skins_info() and implement \Drupal\slick\SlickSkinInterface
to register ones. Clear the cache once.
See slick.api.php for more info on skins.
See \Drupal\slick\SlickSkinInterface.
Other skins are available at http://dgo.to/slick_extras
Some extra skins are WIP which may not work as expected.
To create Slick grid or multiple rows carousel, there are 3 options:
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, see skin Grid above for more details.
Note, non-BEM classes are added by JS.
<div class="slick">
<div class="slick__slider slick-initialized slick-slider">
<div class="slick__slide"></div>
</div>
<nav class="slick__arrow"></nav>
</div>
asNavFor should target slick-initialized class/ID attributes.
A basic knowledge of Drupal site building is required. If you get stuck:
If you do have bug reports, we love bugs, please:
For the Slick library bug, please report it to the actual library:
https://github.com/kenwheeler/slick
You can create a fiddle to isolate the bug if reproduceable outside the module:
http://jsfiddle.net/
For the support requests, a screenshot of the output and Slick form are helpful.
Shortly, you should kindly help the maintainers with detailed info to help you.
Thanks.
A full release should be reasonable after proper feedback from the community,
some code cleanup, and optimization where needed. Patches are very much welcome.
Alpha and Beta releases are for developers only. Be aware of possible breakage.
However if it is broken, unless an update is explicitly required, clearing cache
should fix most issues during DEV phases.
- Bug fixes, code cleanup, optimization, and full release.
Please consider helping in the issue queue, provide improvement, or helping with documentation.
If you find this module helpful, please help back spread the love. Thanks.
Slick 8.x-1.x by gausarts, and other authors below.
Slick 7.x-2.x by gausarts, inspired by Flexslider with CTools integration.
Slick 7.x-1.x by arshadcn, the original author.
- https://www.drupal.org/node/2232779/committers
- CHANGELOG.txt for helpful souls with their patches, suggestions and reports.
See the project page on drupal.org: http://drupal.org/project/slick.
More info relevant to each option is available at their form display by hovering
over them, and click a dark question mark.
See the Slick docs at:
- http://kenwheeler.github.io/slick/
- https://github.com/kenwheeler/slick/