5 Modern JS Sliders for 2022
Tags: javascript, webdev, css, html
Published: 2021-11-28 05:19:41

I find I'm always looking for a new JS slider library for one reason or another. Here's a roughly ordered list of the top libraries that I've come across going into 2022.

## [SwiperJS](https://swiperjs.com/)

{% github nolimits4web/swiper no-readme %}

<table>
<tr>

<td><img alt="Stars" src="https://img.shields.io/github/stars/nolimits4web/swiper?style=for-the-badge"/><img align="left" alt="Fees" src="https://img.shields.io/badge/Fees-FREE-brightgreen?style=for-the-badge"/><img align="left" alt="License" src="https://img.shields.io/github/license/nolimits4web/swiper?style=for-the-badge"/></td>

<td><img alt="MinZip size" src="https://img.shields.io/bundlephobia/minzip/swiper?style=for-the-badge"/><img alt="Commits a month" src="https://img.shields.io/github/commit-activity/m/nolimits4web/swiper?style=for-the-badge"/></td>

<td><img alt="Latest Release" src="https://img.shields.io/github/release-date/nolimits4web/swiper?style=for-the-badge"/><img alt="Downloads a month" src="https://img.shields.io/npm/dm/swiper?label=NPM%20Downloads&style=for-the-badge"/></td>

</tr>
</table>

:+1: Very mature project with long-term backing.

:+1: Mobile slider experience feels native.

:100: Framework support for React, Vue, Angular, and Svelte.

:-1: On the larger side at nearly 40KB.

:confused: Browser support limited to latest browsers, exact support not documented.

--- 

## [SplideJS](https://splidejs.com/)

{% github Splidejs/splide no-readme %}

<table>
<tr>
<td><img alt="Stars" src="https://img.shields.io/github/stars/Splidejs/splide?style=for-the-badge"/><img align="left" alt="Fees" src="https://img.shields.io/badge/Fees-FREE-brightgreen?style=for-the-badge"/><img align="left" alt="License" src="https://img.shields.io/github/license/Splidejs/splide?style=for-the-badge"/></td>

<td><img alt="MinZip size" src="https://img.shields.io/bundlephobia/minzip/@splidejs/splide?style=for-the-badge"/><img alt="Commits a month" src="https://img.shields.io/github/commit-activity/m/Splidejs/splide?style=for-the-badge"/></td>

<td><img alt="Latest Release" src="https://img.shields.io/github/release-date/Splidejs/splide?style=for-the-badge"/><img alt="Downloads a month" src="https://img.shields.io/npm/dm/@splidejs/splide?label=NPM%20Downloads&style=for-the-badge"/></td>

</tr>
</table>

:+1: Mobile slider experience feels native.

:+1: About half the size of SwiperJS.

:100: Framework support for React, Vue, and Svelte.

--- 

## [GlideJS](https://glidejs.com/)

{% github glidejs/glide no-readme %}

<table>
<tr>
<td><img alt="Stars" src="https://img.shields.io/github/stars/glidejs/glide?style=for-the-badge"/><img align="left" alt="Fees" src="https://img.shields.io/badge/Fees-FREE-brightgreen?style=for-the-badge"/><img align="left" alt="License" src="https://img.shields.io/github/license/glidejs/glide?style=for-the-badge"/></td>

<td><img alt="MinZip size" src="https://img.shields.io/bundlephobia/minzip/@glidejs/glide?style=for-the-badge"/><img alt="Commits a month" src="https://img.shields.io/github/commit-activity/m/glidejs/glide?style=for-the-badge"/></td>

<td><img alt="Latest Release" src="https://img.shields.io/github/release-date/glidejs/glide?style=for-the-badge"/><img alt="Downloads a month" src="https://img.shields.io/npm/dm/@glidejs/glide?label=NPM%20Downloads&style=for-the-badge"/></td>

</tr>
</table>

:+1: Very mature slider library.

:+1: Only 7KB

:-1: Touch experience suffers. GlideJS ignores user input while mid-transition.

--- 

## [TinySlider](https://github.com/ganlanyuan/tiny-slider)

{% github ganlanyuan/tiny-slider no-readme %}

<table>
<tr>
<td><img alt="Stars" src="https://img.shields.io/github/stars/ganlanyuan/tiny-slider?style=for-the-badge"/><img align="left" alt="Fees" src="https://img.shields.io/badge/Fees-FREE-brightgreen?style=for-the-badge"/><img align="left" alt="License" src="https://img.shields.io/github/license/ganlanyuan/tiny-slider?style=for-the-badge"/></td>

<td><img alt="MinZip size" src="https://img.shields.io/bundlephobia/minzip/tiny-slider?style=for-the-badge"/><img alt="Commits a month" src="https://img.shields.io/github/commit-activity/m/ganlanyuan/tiny-slider?style=for-the-badge"/></td>

<td><img alt="Latest Release" src="https://img.shields.io/github/release-date/ganlanyuan/tiny-slider?style=for-the-badge"/><img alt="Downloads a month" src="https://img.shields.io/npm/dm/tiny-slider?label=NPM%20Downloads&style=for-the-badge"/></td>

</tr>
</table>

:+1: Feature rich.

:100: Very good browser support, includes IE 8+.

:-1: Project hasn't received any commits in over a year. _(As of Dec 2020, last commit was July 2020)_

:-1: Mobile user experience isn't as good as other libraries. Transitions don't feel as smooth and page vertically scrolls a lot.

--- 

## [Flickity](https://flickity.metafizzy.co/)

{% github metafizzy/flickity no-readme %}

<table>
<tr>
<td><a href="https://flickity.metafizzy.co#commercial-license"><img alt="Stars" src="https://img.shields.io/github/stars/metafizzy/flickity?style=for-the-badge"/><img align="left" alt="Fees" src="https://img.shields.io/badge/Fees-$25%20per%20dev-red?style=for-the-badge"/></a><img align="left" alt="License" src="https://img.shields.io/badge/License-Multiple-gray?style=for-the-badge"/></td>

<td><img alt="MinZip size" src="https://img.shields.io/bundlephobia/minzip/flickity?style=for-the-badge"/><img alt="Commits a month" src="https://img.shields.io/github/commit-activity/m/metafizzy/flickity?style=for-the-badge"/></td>

<td><img alt="Latest Release" src="https://img.shields.io/github/release-date/metafizzy/flickity?style=for-the-badge"/><img alt="Downloads a month" src="https://img.shields.io/npm/dm/flickity?label=NPM%20Downloads&style=for-the-badge"/></td>

</tr>
</table>

:+1: Good mobile experience.

:-1: Project hasn't received any commits in nearly a year. _(As of Dec 2020, last commit was Jan 2021)_

:-1: Commercial pricing at $25 per a dev.

--- 

_FYI - I did not include sliders that require JQuery in my list since I rarely use JQuery and pulling in JQuery for a single component is a deal-breaker. Comment below with your own favorites._