Slick Carousel

Basic

These carousels are powered by slick.js. The example below is a basic initialization.

Image
Image
Image
Image
Image

Multiple Items

Set number of slides to show for carousel by setting slidesToShow property.

Image
Image
Image
Image
Image
Image
Image
Image
Image

Responsive Display

Set slides to show for carousel by setting responsive property.

Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image

Variable Width

Set variableWidth: true to enabled width features and set variableWidth property for width.

Image
Image
Image
Image
Image
Image

Fade

Set fade: true to enabled fade effect and set fade property for linear speed.

Image
Image
Image
Image

Adaptive Height

Set adaptiveHeight: true to enabled height features and set adaptiveHeight property for height.

Image
Image
Look ma!
Image
Check
this out!
Image
Woo!

Center Mode

Centered carousel, you can enable this feature by setting centerMode: true.

Image
Image
Image
Image
Image

Lazy Loading

To use lazy loading, set a data-lazy attribute on your img tags and leave off the src.

Image
Image
Image
Image
Image

Autoplay

Set autoplay: true to enabled autoplay features and set autoplaySpeed property for autoplay speed.

Image
Image
Image
Image
Image

Slider Syncing

Sync your carousels and make one of them as navigation, look the example.

Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
© Aquiry.
Crafted with by Codebucks