Slick Carousel

Slick is a powerful, performant, and fully responsive carousel integration leveraging Ken Wheeler's Slick carousel. Engineered to satisfy modern Core Web Vitals, it transforms the traditional slideshow into a robust, prioritized media delivery system.

Samples Demo

Requirements

• Blazy
• Slick library (1.6+ and <= 1.8.0). Technical Context.

  Note: The Master branch is unsupported. Download an official release and rename the directory to slick so assets are accessible at:

  • /libraries/slick/slick/slick.css
  • /libraries/slick/slick/slick-theme.css (Optional)
  • /libraries/slick/slick/slick.min.js

  If using composer, it starts with:
  /libraries/slick-carousel/slick/.
  Open one of them in a browser, ensure no 404 or 403 errors.

• [Optional] jqeasing at /libraries/easing/jquery.easing.min.js. (Fallback for legacy browsers; ignorable when utilizing native CSS3 easing).

Installation & Upgrades

• Installation Manual
• Composer: Refer to the Blazy Composer Guide.
• Upgrade Path: Refer to the Blazy Upgrade Path
• Update SOP: A definitive guide for update and upgrade troubleshootings, including WSOD.

Features

• Deep Integration: Seamlessly works with Core Media, Views, Paragraphs, Media contribs and Layout Builder.
• LCP & CLS Management: Engineered for a "CLS-zero" strategy, our framework integrates sophisticated preloading alongside native fetchpriority and decoding to systematically eliminate LCP discovery delays. We provide rigorous optimization for everything from standard image, CSS backgrounds and responsive <picture> elements to optimized video posters. Absolute layout stability is maintained via modern aspect-ratio with a refined padding-bottom fallback for backward compatibility, rejecting legacy jQuery dependencies like FitVids in favor of high-performance, native solutions.
• Intelligent Lazy-loading: Sophisticated preloading via the Blazy engine for images, CSS backgrounds, iframes, SVG, HTML5 video, audio, and HTML media type.
• Privacy & GDPR Compliance: Utilizing a Two-Click Media Loader, no third-party iframes or tracking scripts are initialized within our Media player until the user actively engages with the play button. This "Active Opt-in" workflow satisfies strict GDPR and ePrivacy requirements.
• Modular & Extensible Skins: Our layouts are built with Pure CSS—no bloated JS invited beyond the initializer.
  • Fullscreen with thumbnails or videos: For cinematic storytellers.
  • Fullscreen or Fullwidth with overlayed video slides: For professional visionaries.
  • Fullwidth with down arrow: For pleasant companies with massive information below the fold.
  • Inline & Vertical Tabs: For guided journeys through dense information. Complexity, beautifully curated.
  • Split: A perfect 50/50 balance of description and media.
  • Grid: For organized chaos. With Native Grid, it's the perfect marriage of high-end aesthetics and structural rigidity.
  • And a few more as available at Slick UI.

  They are basic OOTB; however Themers may craft the aesthetic blueprints, and Developers register them as a plugin for Site Builders to execute.

• Developer Friendly: Features a "Vanilla" mode for advanced works and a robust API for custom/theme implementations.
• Editor-Friendly: The Slick Filter provides a streamlined shortcode for embedding rich multimedia slides directly within text editors; see /filter/tips for implementation details.
• Nested sliders/overlays: Multiple carousels within a single Slick via Slick Paragraphs and Slick Views. Overlaying static or sliding videos over large background can not be easier.
• Randomization: A strategic solution for refreshing cached content—such as advertisements, client lists or e-commerce products—ensuring a dynamic user experience across pages without compromising performance.
• Robust content supports: Plain image, Responsive image/ picture, responsive iframe, SVG, video, audio and HTML third party contents.
• Inline & lightbox mixed-media: A single Media switcher option for various interactions: image to content, iframe, media player, and (quasi-)lightboxes: Slick lightbox, Colorbox, PhotoSwipe, Flybox, Magnific Popup, Zooming, etc.
• Navigation/ pager options:
  • Arrows
  • Dots, 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:
    • Vertical tabs
    • Inline tabs
  • Image thumbnails/tabs

Similar modules

• Splide, the vanilla JavaScript slider.
  Slick successor with better accessibility supports, plugin, navigable Vanilla slides and more.

Troubleshooting & Claim Scope

• Powerful:
  Slick is flexible by design. That flexibility allows advanced compositions—but also makes misconfiguration and "disaster" possible. Certain option combinations can surface edge cases or trade-offs. With great flexibility, comes great possibility, for better or worse.
  When issues arise, consult the documented
  optimization checklist, troubleshooting guide, known issues, and reported gotchas (including relevant sub-modules) to determine whether the behavior is already understood or documented.
• Performant:
  This is not a marketing assertion. The claim is derived from repeated, instrumented benchmarks under controlled conditions, and is measurable using standard performance tooling.
• Fully responsive:
  Slick supports multi-breakpoint layouts and adaptive behavior across viewport sizes.

We encourage scrutiny of these claims. Where conclusions differ, we welcome evidence grounded in reproducible measurements, as outlined in
Performance & Technical Accountability.

Performance & Technical Accountability

Slideshows are not inherently problematic—execution is.
Criticism of carousels often reflects poor integration or uninformed configuration rather than an unavoidable limitation of the pattern itself.
Over years of technical refinement, Slick has established a framework that can control
Largest Contentful Paint (LCP) and eliminate
Cumulative Layout Shift (CLS)
when deployed with strict isolation, intent, and appropriate configuration.
Results may vary as page complexity increases—particularly in the presence of ads, third-party scripts, or competing rendering strategies.

To maintain our standards of technical excellence, all contributors are required to review our performance documentation before submitting issues:

• Benchmarking Guidelines: Mandatory reading for any reports concerning performance. For other issues, please ensure your submission includes verifiable, objective data. We welcome all feedback supported by sound evidence.
• Strategic Optimization Checklist: A definitive guide to modern performance standards. Adherence to these practices is essential, as deviations are a primary cause of avoidable performance degradation issues.

Submitting Issues or Patches

Please review our Contribution Guidelines before participating.

Our development philosophy is strictly data-driven and solution-oriented. To respect collective time, we adhere to a simple principle: The data dictates the path, and the solution defines the progress..