Slick is a popular library 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. Carousels are compatible with all modern browsers and devices, making it a great choice to create a responsive and mobile-friendly website.
Slick for J1 Template is a best friend for all web programmers because of its flexibility. A rich set of callbacks and a simple configuration make carousels individual and powerful as possible. Find by the following examples what carousels based on Slick can do.
15-30 Minutes to read
Carousel from Collections
A carousel from a collection for J1 Template is a pre-defined type to display a collection of articles on a webpage. It is a popular way to showcase a group of articles visually.
slick::collection_carousel_biography[]# ------------------------------------------------------------------------------
# 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
# ------------------------------------------------------------------------
# CSS filter options
#
filters:
enabled: true
grayscale: 0
contrast: 1
brightness: 0.8
# ----------------------------------------------------------------------------
# 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: 1Collection 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.
| For collection carousels, currently no lightboxes are supported. |
Carousel 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_featured[]| For post carousels, currently no lightboxes are supported. |
# --------------------------------------------------------------------------
# POST Carousel (Featured Posts)
#
- carousel:
enabled: true
id: post_carousel_featured
type: post
gutters: 1
group: Featured
image_styles: img-fluid img-object--cover
image_height: 300px
translate_links: false
link_new_window: true
# ------------------------------------------------------------------------
# Carousel options
#
options:
autoplay: false
arrows: true
dots: true
slidesToShow: 2
slidesToScroll: 2
responsive: true
# ------------------------------------------------------------------------
# CSS filter options
#
filters:
enabled: true
grayscale: 0
contrast: 1
brightness: 0.8
# ------------------------------------------------------------------------
# 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.
Carousel from Images
Image carousels 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.
An 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.
Base Image Carousel
A base image carousel is the most compact style, often used landing pages to provide an overview.
slick::image_carousel_simple[]# ------------------------------------------------------------------------------
# IMAGE carousel
#
- slider:
enabled: true
id: image_carousel_simple
type: image
gutters: 0
image_base_path: /assets/image/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 can also include animation effects, such as fade-in or slide-in transitions between images, to make the presentation more engaging and visually appealing.
Full Image Carousel
The full image carousel layout provide all options.
slick::image_carousel_full[]# ------------------------------------------------------------------------------
# IMAGE carousel + Captions + Lightbox
#
- slider:
enabled: true
id: image_carousel_full
type: image
gutters: 1
image_base_path: /assets/image/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
...The lighbox used for carousels is Slick Lighbox, an addon package build-in the J1 Slick Module. The lighbox is automatically configured and fired on all images of a carousel.