1 <h2>Slick Carousel</h2>
3 <p>Slick is a powerful and performant slideshow/carousel solution leveraging Ken<br />
4 Wheeler's Slick carousel.<br />
5 See http://kenwheeler.github.io/slick</p>
7 <p>Powerful: Slick is one of the sliders [1], as of 9/15, the only one [2], which<br />
8 supports nested sliders and a mix of lazy-loaded image/video with<br />
9 image-to-iframe or multimedia lightbox switchers.<br />
10 See below for the supported media.</p>
12 <p>Performant: Slick is stored as plain HTML the first time it is requested, and<br />
13 then reused on subsequent requests. Carousels with cacheability and lazyload<br />
14 are lighter and faster than those without.</p>
16 <p>Slick has gazillion options, please start with the very basic working<br />
17 samples from slick_example [3] only if trouble to build slicks. Be sure to read<br />
18 its README.txt. Spending 5 minutes or so will save you hours in building more<br />
19 complex slideshows.</p>
21 <p>The module supports Slick 1.6 above.<br />
22 Slick 2.x is just out 9/21/15, and hasn't been officially supported now, 9/27.</p>
24 <p>[1] https://groups.drupal.org/node/20384<br />
25 [2] https://www.drupal.org/node/418616<br />
26 [3] http://dgo.to/slick_extras</p>
31 <li>Slick library: <br />
32 o Download Slick archive >= 1.6 from https://github.com/kenwheeler/slick/ <br />
33 o Extract it as is, rename "slick-master" to "slick", so the assets are at:<br />
34 /libraries/slick/slick/slick.css<br />
35 /libraries/slick/slick/slick-theme.css (optional if a skin chosen)<br />
36 /libraries/slick/slick/slick.min.js</li>
37 <li>Download jqeasing from https://github.com/gdsmith/jquery.easing, so available at:<br />
38 /libraries/easing/jquery.easing.min.js<br />
39 This is CSS easing fallback for non-supporting browsers.</li>
40 <li>Blazy.module, to reduce DRY stuffs, and as a bonus, advanced lazyloading such as delay lazyloading for below-fold sliders, iframe, (fullscreen) CSS background lazyloading, breakpoint dependent multi-serving images, lazyload ahead for smoother UX.</li>
43 <p> Important! Be sure to enable Blazy first before updating Slick Alphas,<br />
44 otherwise a requirement error.</p>
49 <li>Fully responsive. Scales with its container.</li>
50 <li>Uses CSS3 when available. Fully functional when not.</li>
51 <li>Swipe enabled. Or disabled, if you prefer.</li>
52 <li>Desktop mouse dragging.</li>
53 <li>Fully accessible with arrow key navigation.</li>
54 <li>Built-in lazyLoad, and multiple breakpoint options.</li>
55 <li>Random, autoplay, pagers, arrows, dots/text/tabs/thumbnail pagers etc...</li>
56 <li>Supports pure text, responsive image, iframe, video carousels with aspect ratio. No extra jQuery plugin FitVids is required. Just CSS.</li>
57 <li>Works with Views, core and contrib fields: Image, Media Entity.</li>
58 <li>Optional and modular skins, e.g.: Carousel, Classic, Fullscreen, Fullwidth, Split, Grid or a multi row carousel.</li>
59 <li>Various slide layouts are built with pure CSS goodness.</li>
60 <li>Nested sliders/overlays, or multiple slicks within a single Slick via Views.</li>
61 <li>Some useful hooks and drupal_alters for advanced works.</li>
62 <li>Modular integration with various contribs to build carousels with multimedia lightboxes or inline multimedia.</li>
63 <li>Media switcher: Image linked to content, Image to iframe, Image to colorbox, Image to photobox.</li>
64 <li>Cacheability + lazyload = light + fast.</li>
69 <p>Install the module as usual, more info can be found on:<br />
70 http://drupal.org/documentation/install/modules-themes/modules-7</p>
72 <p>The Slick module has several sub-modules:</p>
75 <li>slick_ui, included, to manage optionsets, can be uninstalled at production.</li>
76 <li><a href="http://dgo.to/slick_media">slick_media</a>, to get richer contents using Media entity.</li>
77 <li><a href="http://dgo.to/slick_video">slick_video</a>, to get video carousels using Video Embed Field.</li>
78 <li><a href="http://dgo.to/slick_paragraphs">slick_paragraphs</a>, to get more complex slides at field level.</li>
79 <li><a href="http://dgo.to/slick_views">slick_views</a>, to get more complex slides.</li>
80 <li><a href="http://dgo.to/slick_extras">slick_extras</a> contains <strong>slick_devel</strong>, if you want to help testing and developing the Slick, and <strong>slick_example</strong>, to get up and running quickly.</li>
83 <h3>OPTIONAL INTEGRATION</h3>
85 <p>Slick supports enhancements and more complex layouts.</p>
88 <li>Colorbox, to have grids/slides that open up image/video in overlay.</li>
89 <li>Photobox, idem ditto.</li>
90 <li>Responsive image, in core, to get truly responsive image.</li>
91 <li><a href="http://dgo.to/media_entity">Media Entity</a>, to have richer contents: image, video, or a mix of em.</li>
92 <li><a href="http://dgo.to/video_embed_field">Video Embed Media</a>, idem ditto.</li>
93 <li><a href="http://dgo.to/paragraphs">Paragraphs</a>, to get more complex slides at field level.</li>
94 <li>Mousewheel, download from https://github.com/brandonaaron/jquery-mousewheel, so it is available at:<br />
95 <em>/libraries/mousewheel/jquery.mousewheel.min.js</em></li>
102 <p>To create optionsets, go to:</p>
104 <p><em> admin/config/media/slick</em></p>
106 <p>Be sure to enable Slick UI sub-module first, otherwise regular "Access denied".<br />
107 They will be available at field formatter "Manage display", and Views UI.</p>
109 <h3>VIEWS AND FIELDS</h3>
111 <p>Slick works with Views and as field display formatters.<br />
112 Slick Views is available as a style plugin included at slick_views.module.<br />
113 Slick field formatter included as a plugin which supports core: Image, Text.</p>
115 <h3>PROGRAMATICALLY</h3>
117 <p>See slick.api.php for samples.</p>
119 <h3>NESTED SLICKS</h3>
121 <p>Nested slick is a parent Slick containing slides which contain individual child<br />
122 slick per slide. The child slicks are basically regular slide overlays like<br />
123 a single video over the large background image, only with nested slicks it can<br />
124 be many videos displayed as a slideshow as well.<br />
125 Use Slick Paragraphs or Views to build one.<br />
126 Supported multi-value fields for nested slicks: Image, Text, VEF, Media entity.</p>
130 <p>The main purpose of skins are to demonstrate that often some CSS lines are<br />
131 enough to build fairly variant layouts. No JS needed. Unless, of course, for<br />
132 more sophisticated slider like spiral 3D carousel which is beyond what CSS can<br />
133 do. But more often CSS will do.</p>
135 <p>Skins allow swappable layouts like next/prev links, split image or caption, etc.<br />
136 with just CSS. However a combination of skins and options may lead to<br />
137 unpredictable layouts, get yourself dirty. Use the provided samples to see<br />
138 the working skins.</p>
140 <p>Some default complex layout skins applied to desktop only, adjust for the mobile<br />
141 accordingly. The provided skins are very basic to support the necessary layouts.<br />
142 It is not the module job to match your awesome design requirements.</p>
144 <h4><strong>Optional skins:</strong></h4>
146 <p><strong>- None</strong><br />
147 It is all about DIY.<br />
148 Doesn't load any extra CSS other than the basic styles required by slick.<br />
149 Skins at the optionset are ignored, only useful to fetch description and<br />
150 your own custom work when not using the sub-modules, nor plugins.<br />
151 If using individual slide layout, do the layouts yourself.</p>
153 <p><strong>- Classic</strong><br />
154 Adds dark background color over white caption, only good for slider (single<br />
155 slide visible), not carousel (multiple slides visible), where small captions<br />
156 are placed over images, and animated based on their placement.</p>
158 <p><strong>- Full screen</strong><br />
159 Works best with 1 slidesToShow. Use z-index layering > 8 to position elements<br />
160 over the slides, and place it at large regions. Currently only works with<br />
161 Slick fields, use Views to make it a block. Use Slick Paragraphs to<br />
162 have more complex contents inside individual slide, and assign it to Slide<br />
163 caption fields.</p>
165 <p><strong>- Full width</strong><br />
166 Adds additional wrapper to wrap overlay video and captions properly.<br />
167 This is designated for large slider in the header or spanning width to window<br />
168 edges at least 1170px width for large monitor. To have a custom full width<br />
169 skin, simply prefix your skin with "full", e.g.: fullstage, fullwindow, etc.</p>
171 <p><strong>- Split</strong><br />
172 Caption and image/media are split half, and placed side by side. This requires<br />
173 any layout containing "split", otherwise useless.</p>
175 <p><strong>- Grid</strong><br />
176 Only reasonable if you have considerable amount of slides.<br />
177 Uses the Foundation 5.5 block-grid, and disabled if you choose your own skin<br />
178 not named Grid. Otherwise overrides skin Grid accordingly.</p>
180 <p><strong> Requires:</strong><br />
181 Visible slides, Skin Grid for starter, A reasonable amount of slides,<br />
182 Optionset with Rows and slidesPerRow = 1.<br />
183 Avoid variableWidth and adaptiveHeight. Use consistent dimensions.<br />
184 This is module feature, older than core Rows, and offers more flexibility.<br />
185 Available at slick_views, and configurable via Views UI.</p>
187 <p>If you want to attach extra 3rd libraries, e.g.: image reflection, image zoomer,<br />
188 more advanced 3d carousels, etc, simply put them into js array of the target<br />
189 skin. Be sure to add proper weight, if you are acting on existing slick events,<br />
190 normally < 0 (slick.load.min.js) is the one.</p>
192 <p>Use hook_slick_skins_info() and implement \Drupal\slick\SlickSkinInterface<br />
193 to register ones. Clear the cache once.</p>
195 <p>See slick.api.php for more info on skins.<br />
196 See \Drupal\slick\SlickSkinInterface.</p>
198 <p>Other skins are available at http://dgo.to/slick_extras<br />
199 Some extra skins are WIP which may not work as expected.</p>
203 <p>To create Slick grid or multiple rows carousel, there are 3 options:</p>
205 <p>1. One row grid managed by library:<br />
206 Visit admin/config/media/slick,<br />
207 Edit current optionset, and set<br />
208 slidesToShow > 1, and Rows and slidesperRow = 1</p>
210 <p>2. Multiple rows grid managed by library:<br />
211 Visit admin/config/media/slick,<br />
212 Edit current optionset, and set<br />
213 slidesToShow = 1, Rows > 1 and slidesPerRow > 1</p>
215 <p>3. Multiple rows grid managed by Module:<br />
216 Visit admin/structure/views/view/slick_x/edit/block_grid from slick_example,<br />
217 Be sure to install the Slick example sub-module first.<br />
218 Requires skin "Grid", and slidesToShow, Rows and slidesPerRow = 1.</p>
220 <p>The first 2 are supported by core library using pure JS approach.<br />
221 The last is the Module feature using pure CSS Foundation block-grid.</p>
224 The total amount of Views results must be bigger than Visible slides, otherwise<br />
225 broken Grid, see skin Grid above for more details.</p>
227 <h3>HTML STRUCTURE</h3>
229 <p>Note, non-BEM classes are added by JS.</p>
231 <p><div class="slick"><br />
232 <div class="slick__slider slick-initialized slick-slider"><br />
233 <div class="slick__slide"></div><br />
234 </div><br />
235 <nav class="slick__arrow"></nav><br />
238 <p>asNavFor should target slick-initialized class/ID attributes.</p>
240 <h3>BUG REPORTS OR SUPPORT REQUESTS</h3>
242 <p>A basic knowledge of Drupal site building is required. If you get stuck:</p>
245 <li>consult the provided READMEs,</li>
246 <li>descriptions on each form item,</li>
247 <li>the relevant guidelines from the supported modules,</li>
248 <li>consider the project issue queues, your problem may be already addressed,</li>
249 <li>install slick_example.</li>
254 <p>If you do have bug reports, we love bugs, please:</p>
257 <li>provide steps to reproduce it,</li>
258 <li>provide detailed info, a screenshot of the output and Slick form, or words to identify it any better,</li>
259 <li>make sure that the bug is caused by the module.</li>
264 <p>For the Slick library bug, please report it to the actual library:<br />
265 https://github.com/kenwheeler/slick</p>
267 <p>You can create a fiddle to isolate the bug if reproduceable outside the module:<br />
268 http://jsfiddle.net/</p>
270 <p>For the support requests, a screenshot of the output and Slick form are helpful.<br />
271 Shortly, you should kindly help the maintainers with detailed info to help you.<br />
274 <h3>TROUBLESHOOTING</h3>
276 <p>- When upgrading from Slick v1.3.6 to later version, try to resave options at:<br />
277 o admin/config/media/slick<br />
278 o admin/structure/types/manage/CONTENT_TYPE/display<br />
279 o admin/structure/views/view/VIEW_NAME<br />
280 only if trouble to see the new options, or when options don't apply properly.<br />
281 Most likely true when the library adds/changes options, or the module<br />
282 does something new. This is normal for any library even commercial ones, so<br />
283 bear with it.</p>
285 <p>- Always clear the cache, and re-generate JS (if aggregation is on) when<br />
286 updating the module to ensure things are picked up:<br />
287 o admin/config/development/performance</p>
289 <p>- If you are customizing template files, or theme functions, be sure to re-check<br />
290 against the latest.</p>
292 <p>- Be sure Slick release is similar, or later than Blazy.</p>
294 <h3>KNOWN ISSUES</h3>
296 <p>- Slick admin CSS may not be compatible with private or contrib admin<br />
297 themes. Only if trouble with admin display, please disable it at:<br />
298 admin/config/media/blazy</p>
300 <p>- The Slick lazyLoad is not supported with Responsive image. Slick only<br />
301 facilitates Responsive image to get in. The image formatting is taken over by<br />
302 Responsive image.<br />
303 Some other options such as Aspect ratio is currently not supported either.</p>
305 <p>- Photobox is best for:<br />
306 - infinite true + slidesToShow 1<br />
307 - infinite false + slidesToShow N<br />
308 If "infinite true + slidesToShow > 1" is a must, but you don't want dup<br />
309 thumbnails, simply override the JS to disable 'thumbs' option.</p>
311 <p>- The following is not module related, but worth a note:<br />
312 o lazyLoad ondemand has issue with dummy image excessive height.<br />
313 Added fixes to suppress it via option Aspect ratio (fluid | enforced).<br />
314 Or use Blazy lazyload for more advanced options.<br />
315 o Aspect ratio is not compatible with Responsive image or multi-serving<br />
316 images.<br />
317 However if you can stick to one Aspect ratio, choose 'enforced' instead.<br />
318 Otherwise disable Aspect ratio for multi-serving images.<br />
319 o If the total < slidesToShow, Slick behaves. Previously added a workaround to<br />
320 fix this, but later dropped and handed over to the core instead.<br />
321 Brought back the temp fix for 1.6+ as per 10/18/16:<br />
322 See https://github.com/kenwheeler/slick/issues/262<br />
323 o Fade option with slideToShow > 1 will screw up.<br />
324 o variableWidth ignores slidesToShow.<br />
325 o Too much centerPadding at small device affects slidesToShow.<br />
326 o Infinite option will create duplicates or clone slides which look more<br />
327 obvious if slidesToShow > 1. Simply disable it if not desired.<br />
328 o If thumbnail display is Infinite, the main one must be infinite too, else<br />
329 incorrect syncing.<br />
330 o adaptiveHeight is no good for vertical.</p>
332 <h3>CURRENT DEVELOPMENT STATUS</h3>
334 <p>A full release should be reasonable after proper feedback from the community,<br />
335 some code cleanup, and optimization where needed. Patches are very much welcome.</p>
337 <p>Alpha and Beta releases are for developers only. Be aware of possible breakage.</p>
339 <p>However if it is broken, unless an update is explicitly required, clearing cache<br />
340 should fix most issues during DEV phases. Prior to any update, always visit:<br />
341 /admin/config/development/performance</p>
343 <p>And hit "Clear all caches" button once the new Slick is in place. Regenerate CSS<br />
344 and JS as the latest fixes may contain changes to the assets.<br />
345 Have the latest or similar release Blazy to avoid trouble in the first place.</p>
349 <p>- Bug fixes, code cleanup, optimization, and full release.</p>
351 <h3>HOW CAN YOU HELP?</h3>
353 <p>Please consider helping in the issue queue, provide improvement, or helping with documentation.</p>
355 <p>If you find this module helpful, please help back spread the love. Thanks.</p>
357 <h3>AUTHOR/MAINTAINER/CREDITS</h3>
359 <p>Slick 8.x-1.x by gausarts, and other authors below.<br />
360 Slick 7.x-2.x by gausarts, inspired by Flexslider with CTools integration.<br />
361 Slick 7.x-1.x by arshadcn, the original author.</p>
363 <p>- https://www.drupal.org/node/2232779/committers<br />
364 - CHANGELOG.txt for helpful souls with their patches, suggestions and reports.</p>
368 <p>See the project page on drupal.org: http://drupal.org/project/slick.</p>
370 <p>More info relevant to each option is available at their form display by hovering<br />
371 over them, and click a dark question mark.</p>
373 <p><strong>See the Slick docs at:</strong><br />
374 - http://kenwheeler.github.io/slick/<br />
375 - https://github.com/kenwheeler/slick/</p>