Slick Carousel / 70,000 / Demo / Tutorial - 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
How to generate / create slideshow 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. 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. |
View slideshow / 127,000 - News item slideshow (such as the title, image and teaser of the last 5 news articles submitted)
- The Last X number of X submitted (images, videos, blog entries, forum posts, comments, testimonials, etc.).
- Rotate any image, based on any filters you can apply in views.
- Hottest new products for any ecommerce drupal site.
- Rotate contact links, share links, etc.
- Heck, you could rotate entire nodes, categories, image galleries, etc. I wouldn't suggest it, but you have that power.
Its also a great space saver. Places where you had multiple images or multiple items such as RSS feeds or category listings can now be presented in a slideshow.
Tutorials and Further Reading |