Slick is a popular jQuery plugin for creating responsive and fully customizable carousels created by J1 Template. It allows developers to easily create beautiful and dynamic carousels that can display images, videos, or any other type of content in a visually appealing way.
The plugin is designed to be lightweight, fast, and easy to use, making it a popular choice for all web developers. It has many features, including multiple navigation options, lazy loading, or autoplay. Slick carousels are compatible with all modern browsers and devices, making it a great choice to create a responsive and mobile-friendly website.
The slider for J1 Template is a best friend for all web programmers because of its flexibility, a rich set of callbacks and simple configuration to make carousels as individual and powerful as possible. Find by the following examples what Slick carousels can do.
General Features
Slick carousels are using various tools and frameworks, such as Bootstrap, jQuery, and pure CSS. Slick offers a wide range of customization options, like slide transitions, autoplay, navigation controls to create a visually appealing and interactive user experience.
-
Carousels are fully responsive for configurable screen sizes
-
Separate slider option settings per breakpoint
-
Uses CSS3 if available for a browser, fully functional if not
-
Swipe enabled. Or disabled, if prefered
-
Desktop mouse dragging
-
Infinite looping and Autoplay
-
Fully accessible with arrow key and dots navigation
-
Add, remove, filter and unfilter slides
-
Rich set of callbacks to enable individual behaviour of sliders
Carousel from Collections
A Carousel from a collection for J1 Template is a pre-defined carousel type to display collection articles on a webpage. It is a popular way to showcase a collection visually.
Collection carousels pull content from a specific collection. All Carousels for collections display the article image and a link to the article as a caption. All Slick carousels for the J1 Theme can be easily customized in various ways, such as changing the slider speed, or the navigation options like Arrows and Dots.
slick::collection_carousel_biography[]| For collection carousels, currently no lightbox supported. |
# ------------------------------------------------------------------------------
# COLLECTION carousel (biography)
#
- slider:
enabled: true
id: collection_carousel_biography
type: collection
gutters: 1
collection: biography
translate_links: false
link_new_window: true
image_styles: img-fluid img-object--cover img-object--w500 g-height-500
# ----------------------------------------------------------------------------
# Carousel options
#
options:
autoplay: false
arrows: true
dots: true
gutters: 1
slidesToShow: 3
slidesToScroll: 3
responsive: true
# ----------------------------------------------------------------------------
# Reponsive options
#
responsive:
- breakpoint:
settings:
breakOn: 1024
slidesToShow: 2
slidesToScroll: 2
- breakpoint:
settings:
breakOn: 600
slidesToShow: 1
slidesToScroll: 1
dots: true
- breakpoint:
settings:
breakOn: 480
slidesToShow: 1
slidesToScroll: 1Carousel from Posts
A Carousel from posts for J1 Template is a pre-defined carousel type to display post articles on a webpage. It is a popular way to showcase a selection of post articles visually appealingly and can be useful for highlighting important or featured content for your posts content.
Post carousels pull news articles from a specific group. All Carousels for posts display the post category, the title, the author information and date. All Slick carousels for the J1 Theme can be easily customized in various ways, such as changing the number of posts displayed, the slider speed, or the navigation options like Arrows and Dots.
slick::post_carousel_life[]| For post carousels, currently no lightbox supported. |
# ------------------------------------------------------------------------------
# POST Carousel (Life)
#
- carousel:
enabled: true
id: post_carousel_life
type: post
gutters: 1
group: Life
image_styles: img-fluid img-object--cover
image_height: 300px
translate_links: false
link_new_window: true
# ----------------------------------------------------------------------------
# Lightbox options
#
lightbox:
enabled: false
# ----------------------------------------------------------------------------
# Carousel options
#
options:
autoplay: false
arrows: false
dots: true
slidesToShow: 3
slidesToScroll: 1
responsive: true
# ----------------------------------------------------------------------------
# Reponsive options
#
responsive:
- breakpoint:
settings:
breakOn: 1024
slidesToShow: 2
slidesToScroll: 2
- breakpoint:
settings:
breakOn: 600
slidesToShow: 1
slidesToScroll: 1
dots: true
- breakpoint:
settings:
breakOn: 480
slidesToShow: 1
slidesToScroll: 1Post carousels typically used on the homepage of a website, within blog articles, or on dedicated archive or category pages. They can increase user engagement and keep visitors on a website for longer by presenting content dynamically and visually appealingly.
Example Carousel
Responsive carousels are designed to adapt and resize automatically to fit different screen sizes and devices, such as desktops, laptops, tablets, and smartphones. They are created using responsive design techniques, allowing web developers to create a carousel that can be optimized for various devices without needing separate versions or code.
Responsive Slick carousels can be useful for ensuring that content is displayed correctly and consistently across different devices and for providing an optimal user experience for all visitors to a website. They use techniques such as fluid grid layouts, flexible images, and media queries to adjust the carousels size and layout based on the screen size and orientation of the device.
slick::example_carousel_arrows_dots[role="mb-5"]| For example carousels, no lightbox supported. |
# ------------------------------------------------------------------------------
# EXAMPLE Carousel
#
- carousel:
enabled: true
id: example_carousel_arrows_dots
type: example
gutters: 1
style: h3
height: 150px
slides: 9
# ----------------------------------------------------------------------------
# Carousel options
#
options:
arrows: true
dots: true
autoplay: false
slidesToShow: 3
slidesToScroll: 3
responsive: true
# ----------------------------------------------------------------------------
# Reponsive options
#
responsive:
- breakpoint:
settings:
breakOn: 1024
slidesToShow: 2
slidesToScroll: 2
- breakpoint:
settings:
breakOn: 600
slidesToShow: 1
slidesToScroll: 1
- breakpoint:
settings:
breakOn: 480
slidesToShow: 1
slidesToScroll: 1Carousels from Images
An image slider, also known as a slideshow, is a graphical user interface element commonly used in web design and development to showcase a series of images or visual content dynamically and interactively.
Simple Image Carousel
An Slick image carousel typically consists of a container with images and a navigation system, including buttons, arrows, or dots that allow users to move back and forth between images or select a specific image. Image sliders can also include animation effects, such as fade-in or slide-in transitions between images, to make the presentation more engaging and visually appealing.
slick::image_carousel_simple[role="mb-5"]# ------------------------------------------------------------------------------
# IMAGE carousel
#
- slider:
enabled: true
id: image_carousel_simple
type: image
gutters: 0
image_base_path: /assets/images/modules/gallery/mega_cities
image_styles: img-fluid img-object--cover g-height-300
# ----------------------------------------------------------------------------
# Lightbox options
#
lightbox:
enabled: false
# ----------------------------------------------------------------------------
# Caption options
#
captions:
enabled: false
position: bottom
# ----------------------------------------------------------------------------
# Carousel options
#
options:
autoplay: false
arrows: false
dots: false
speed: 300
slidesToShow: 2
slidesToScroll: 2
responsive: true
# ----------------------------------------------------------------------------
# Reponsive options
#
responsive:
- breakpoint:
settings:
breakOn: 1024
slidesToShow: 2
slidesToScroll: 2
- breakpoint:
settings:
breakOn: 800
slidesToShow: 1
slidesToScroll: 1
- breakpoint:
settings:
breakOn: 480
dots: false
slidesToShow: 1
slidesToScroll: 1
# ----------------------------------------------------------------------------
# Slides
#
slides:
- slide: # slide 1
image: denys-nevozhai-1_b.jpg
caption: Man posing at the rooftop of Jin Mao Tower Shanghai - China
...Image sliders are commonly used in website headers, landing pages, galleries, and product showcases to draw attention to specific content or to provide an overview of a collection of images.
Full Image Carousel
A Lightbox is, in general, a helper which displays enlarged, almost screen-filling versions of images (or videos) while dimming the remainder of the page. The technique, introduced by Lightbox2, gained widespread popularity thanks to its simple style. The term lightbox has been employed since then for Javascript libraries to support such functionality.
slick::image_carousel_full[role="mb-5"]The Lighbox used for Slick carousels is Slick-Lighbox, an addon package build-in the J1 Module for Slick. The Lighbox is autoatically configured and fired on all images of a slider if enabled:
# ------------------------------------------------------------------------------
# IMAGE carousel + Captions + Lightbox
#
- slider:
enabled: true
id: image_carousel_full
type: image
gutters: 1
image_base_path: /assets/images/modules/gallery/mega_cities
styles: img-fluid img-object--cover g-height-400
# ----------------------------------------------------------------------------
# Lightbox options
#
lightbox:
enabled: true
# ----------------------------------------------------------------------------
# Caption options
#
captions:
enabled: true
position: bottom
# ----------------------------------------------------------------------------
# Carousel options
#
options:
autoplay: false
arrows: true
dots: true
speed: 300
slidesToShow: 2
slidesToScroll: 2
responsive: true
# ----------------------------------------------------------------------------
# Slides
#
slides:
- slide: # slide 1
image: denys-nevozhai-1_b.jpg
caption: Man posing at the rooftop of Jin Mao Tower Shanghai - China
...