Best Free to Use Javascript (JS) Carousel/Slider Libraries

Posted on 2021-06-14 12:05:28

Slick

I personally use Slick on some of my projects that needs Caroursel or Image Sliders. It is easy to use, beginner friendly, flexible options and has a lot of features.

Some of them are:

  • Fully responsive. Scales with its container.
  • Separate settings per breakpoint
  • Uses CSS3 when available. Fully functional when not.
  • Swipe enabled. Or disabled, if you prefer.
  • Desktop mouse dragging
  • Infinite looping.
  • Fully accessible with arrow key navigation
  • Add, remove, filter & unfilter slides
  • Autoplay, dots, arrows, callbacks and more.

Website: https://github.com/kenwheeler/slick/

License: MIT License

Swiper

They claim to be the most  modern free mobile touch slider. You can use it with your favorite Javascript Framework like VueJs, React, Svelte and Angular.

It is very easy to implement and of course it's Free.

Some features are:

  • Library Agnostic
  • 1:1 Touch movement
  • Mutation Observer
  • Rich API
  • Full True RTL Support
  • Multi Row Slides Layout
  • Transition Effects
  • Two-way Control
  • Full Navigation Control
  • Flexbox Layout
  • Most Flexible Slides Layout Grid
  • Parallax Transitions
  • Images Lazy Loading
  • Virtual Slides

Website: https://swiperjs.com/

License: MIT License

Glider.js

GliderJs is also one of the JS library for Carousel/Slider that I recommend. It is easy to use, tons of options and incredibly lightweight.

Some features are: 

  • Insanely Small (< 2.8kb gzipped!)
  • Ridiculously Fast (as low as 25ms initialization!)
  • Vanilla JS - No Dependencies (look Mom, no jQuery!)
  • Native Browser Scroll (momentum scrolling!)
  • Fully Responsive (breakpoint based settings)
  • Customizable Arrow and Dot Navigation
  • Full Keyboard Accessibility + ARIA Labeling
  • Mouse Dragging Support!
  • Flexbox Support (enabled by default)
  • Easily Extendable
  • Custom Events
  • And more

Website: https://nickpiscitelli.github.io/Glider.js/

License: MIT License

Splide Js Slider

SplideJS can be integrate in JS frameworks like Vue and React. You can also use it in your vanilla js project. 

Some features are:

  • Pure JavaScript without any dependencies
  • Small size, less than 29kB(11kB gzipped)
  • Flexible and extensible
  • Multiple slides
  • Slide or fade transition by CSS
  • Responsive, supporting breakpoints
  • Accepting CSS relative units, such as vw, %, rem, etc
  • No need to crop images
  • Autoplay with progress bar and play/pause buttons
  • "Right to left" and vertical direction
  • Mouse drag and touch swipe
  • Nested slider
  • Lazy loading
  • Thumbnail slider
  • Accessibility friendly, supporting keyboard control and ARIA attributes
  • Dynamically adding/removing slides
  • Internet Explorer 10

Website: https://splidejs.com/

License: MIT License

Final Note

In this list, Slick is the most popular. If you use it, you might easily find tutorials or answers to the problems that you might encounter.

GliderJs is the most lightweight in terms of file size and I think it will not slow down your site if you use it.

When it comes to touch functionality on mobile, Swiper is the best.

When it comes to documentation, I will go with SplideJS cause it is well organise and easy to follow.

All Javascript Carousel/Slider Libraries in this list are very good. You can try them all on your sample project so you can gauge which library will suit your specific needs.