How to use the Slick Slider Generator
- Pick options for your Slick slider and the slide content: demo panels, your own image URLs or cards.
- Set slides per view for desktop, tablet and mobile, the gap, effect, loop, autoplay, arrows and pagination.
- Check the live preview at desktop, tablet and mobile widths.
- Copy the HTML, CSS and JavaScript (CDN or npm), or download a complete HTML page.
About Slick
Slick (“the last carousel you’ll ever need”) was the default jQuery carousel for years and is still embedded in many WordPress themes, Shopify stores and legacy sites. It supports responsive breakpoints, center mode, fade, vertical sliding, lazy loading and autoplay. Its last release (1.8.1) dates from 2017 and it requires jQuery.
Slick options
| Option | Meaning |
|---|---|
slidesToShow / slidesToScroll | Visible slides and how many move per click |
responsive | Array of { breakpoint, settings }; each applies below the breakpoint width |
infinite | Loop the slides |
autoplay, autoplaySpeed | Automatic playback and delay |
fade | Cross-fade (one slide at a time) |
centerMode | Centres the active slide with partial neighbours |
Gaps between slides
Slick has no gap option. The generated CSS adds horizontal margin to .slick-slide and a negative margin on .slick-list so the outer edges stay aligned.
Should you still use Slick?
For an existing site that already loads jQuery and Slick, keeping it consistent is reasonable. For anything new, Swiper or Splide are smaller, maintained, more accessible and need no jQuery — switch the library above and the generator converts your settings.
| Swiper | Splide | Glide.js | Slick | |
|---|---|---|---|---|
| Size (min + gzip, JS) | ~40 KB (bundle) | ~12 KB | ~7 KB | ~12 KB + jQuery ~30 KB |
| Dependencies | None | None | None | jQuery |
| Effects | Slide, fade, cube, coverflow, flip, cards, creative | Slide, fade | Slide | Slide, fade |
| Vertical | Yes | Yes | No | Yes |
| Accessibility | Good (a11y module) | Excellent (ARIA by default) | Basic | Basic |
| Maintained | Yes | Yes | Slowly | No (last release 2017) |
| Licence | MIT for all four | |||
Tools that pair well with the Slick Slider Generator
- Splide Slider Generator — Build an accessible, lightweight Splide carousel without reading the docs — set the options, check the preview at three screen sizes and copy the code.
- Online HTML Editor — A lightweight code playground: edit HTML, CSS and JavaScript side by side, see the result instantly, read console output and download your page as one HTML file.
- Image Compressor — Shrink photos and graphics by 50–90% without visible quality loss.
- CSS Animation Generator — Design CSS animations on a real keyframe timeline.
Frequently asked questions
Does Slick require jQuery?
Yes. Load jQuery (1.7 or newer) before slick.min.js — the generated HTML includes both CDN links in the right order.
How do I add space between Slick slides?
Use CSS margins on
.slick-slide and a matching negative margin on .slick-list; the generator writes this from the gap value.Why are the Slick arrows invisible?
The default theme draws white arrows on a white background. The generated CSS colours them with your accent colour and moves them inside the slider.