28 Free Carousel, Slider and Swiper Libraries for JavaScript, React, Vue, and Svelte
In web development, carousels, sliders, and swipers are essential for creating dynamic, responsive, and visually appealing galleries. This blog post explores 28 free libraries for JavaScript, React, Vue, and Svelte, offering developers a variety of tools to build stunning, mobile-responsive interfaces.
Whether you're creating a gallery, building a swiper for a mobile app, or designing a responsive slider for a website, these libraries provide the functionality and flexibility you need to enhance user experience and engage your audience.
This post is tailored for developers looking to integrate efficient, responsive, and user-friendly carousels into their projects, whether for gallery web development, mobile apps, or responsive web designs.
Here is the best libraries.
1- Swiper
Swiper is a free, modern mobile touch slider designed for mobile websites, web apps, and native/hybrid apps. It features hardware-accelerated transitions and delivers a smooth, native-like experience. Swiper is optimized for modern platforms, focusing on providing the best user experience and simplicity, making it ideal for developers building contemporary mobile applications.
Primary Features of Swiper
- Supports several frameworks as jQuery, React, Zepto, jQuery Mobile, Vue
- Mobile friendly
- Touch Ready
- Transition Effects
- Two-way Control
- Full Navigation Control
- Images Lazy Loading
- History navigation
- Mousewheel control
- Rich API
- RTL Swiper
nolimits4web2- Embla
Embla is a free and open-source A lightweight carousel library with fluid motion and great swipe precision. It comes with a rich plugin system.
3- Carousel.JS
A simple Javascript carousel with no library dependencies, with lazy image loading and support for multiple image sources for the same item depending on device size.
poppa4- Slick
This is a free and minimal slider that is easy to use and configure.
kenwheeler5- Hooper (Vue.js)
Vue.js carousel component, optimized to work with all Vue versions.
Features
- Easily customizable through rich API and addons.
- Touch, Keyboard, Mouse Wheel, and Navigation support.
- Two way control carousels (sync).
- Full RTL layout support.
- Supports vertical sliding.
- Responsive breakpoints.
- Seamless infinite scroll.
- Accessible by providing a robust structure and user control.
- Optimized to work with Vue framework.
- SSR Support.
baianat6- Tiny-Swiper
Ingenious JavaScript Carousel powered by wonderful plugins. Lightweight yet extensible. Import plugins as needed, No more, no less.
joe2237- Splide
Splide is a lightweight, flexible and accessible slider and carousel.
No dependencies, no Lighthouse errors.
Features
- Written in TypeScript
- SEO friendly
- No dependencies
- Lightweight, 29kB (12kB gzipped)
- Flexible and extensible
- Protected by 400+ test cases
- Multiple slides
- Slide or fade transition by CSS
- Supports breakpoints
- Accepts CSS relative units
- Autoplay with progress bar and a play-pause toggle button
- RTL and vertical direction
- Mouse drag and touch swipe
- Free drag mode
- Mouse wheel navigation
- Nested slider
- Lazy loading
- Thumbnail slider
- Auto width and height
- Accessibility friendly
- Live Region
- Internet Explorer 10
Splidejs7- Blaze Slider
Blaze slider is a high-performance JavaScript UI library for creating sliders.
Features
- Fastest Slider Library
- Packed with Features
- Zero Layout Shifts
- Full TypeScript support
- CSS Media-Query-based Responsive configuration
- No slide cloning
- Extremely small bundle size (2kB)
blaze-slider8- Siema
Siema is a lightweight (only 3kb gzipped) carousel plugin with no dependencies and no styling.
pawelgrzybek9- Simple Slider
Simple Slider is a carousel micro library based on the requestAnimationFrame API. It makes for a highly testable implementation and less css-dependent.
Features of Simple Slider
- Small size, less than 1.1kb minified/gzipped
- Support to UMD: AMD, CommonJS and global definition
- Uses requestAnimationFrame for animations
- Supports Page visibility API to pause/resume transitions when user navigates away from the page
- Accept ease functions to customize the transition animation
- Lots of ready-to-use examples available, just check the example folder
- Animates any numerical css property
ruyadorno10- Egjs Flicking
This is a free lightweight yet powerful swiper and slider library for JavaScript projects.
Features
- Works with React, Vue and Angular
- Supports all modern browsers
- Responsive
- Plugins-ready
- Autoplay
- SSR
- Written with TypeScript
- Rich API
11- Glide.js
Glide.js is a lightweight, flexible, and fast JavaScript ES6 slider and carousel that is completely dependency-free. At just ~23kb (~7kb gzipped), it includes all essential functionalities, with the option to remove unused modules for even lighter performance.
Glide.js is also extendable, allowing developers to add custom modules, and is fully compatible with bundlers like Rollup and Webpack, making it a powerful and versatile tool for creating smooth sliding experiences.
glidejs12- Solid Slider
This TypeScript carousel/slider for SolidJS is built on Keen-Slider 6, a high-performance, open-source touch slider with native swipe behavior. It offers multitouch support, compatibility with all common browsers, and has no dependencies.
The package provides both primitive & directive options, as well as components, allowing you to choose based on your needs. For better SSR (Server-Side Rendering) support, using the component is recommended over the directive.
davedbase13- React Cool Virtual (React)
A tiny React hook for rendering large datasets like a breeze.
Features
- β»οΈ Renders millions of items with highly performant DOM recycling.
- π£ Easy to use, based on React hooks.
- π πΌ Simple styling setup with minimal hassle.
- 𧱠Supports fixed, variable, dynamic, and real-time heights/widths.
- π₯ Responsive Web Design (RWD) support for improved UX.
- π Supports sticky headers for building modern lists.
- π Built-in load more callback for handling infinite scroll and skeleton screens.
- π± Imperative scroll-to methods for offset, items, and alignment.
- πΉ Out-of-the-box smooth scrolling with customizable effects.
- π¬ Supports stick-to-bottom and pre-pending items for chat and feeds.
- β³ Provides isScrolling indicator for UI placeholders or performance optimization.
- ποΈ Supports server-side rendering (SSR) for fast FP + FCP and better SEO.
- π TypeScript type definitions included.
- π Super flexible API design with developer experience (DX) in mind.
- π¦ Tiny size (~3.1kB gzipped) with no external dependencies other than React.
wellyshen14- Tiny Slider 2
This is a free and open-source tinu slider that is inspired by Owl Carousel.
Features
- Orientation: Horizontal, Vertical
- Width: Percentage, Fixed, Auto
- Looping: Loop, Rewind
- Navigation: Slide by, Arrow keys, Touch/drag, Custom controls/nav
- Layout: Gutter, Edge padding, Center alignment (v2.9.2+), Responsive, Auto height
- Performance: Lazyload, Autoplay, DOM visibility response
- Interactivity: Custom events, Nested support
- Accessibility: Built-in accessibility features
ganlanyuan15- Vanilla JavaScript Carousel
This is Tiny (1Kb gzipped) JavaScript carousel library with all the features needed for a small web projects.
zoltantothcom16- Owl Carousel 2
Owl Carousel 2 is a highly customizable and responsive jQuery plugin designed for creating modern and versatile carousels and sliders. It offers a wide range of features, including support for both horizontal and vertical orientations, looping, autoplay, lazy loading, and touch/drag navigation.
Features of Owl Carousel 2
- Responsive Design: Adapts seamlessly to different screen sizes and devices.
- Orientation: Supports both horizontal and vertical carousels.
- Looping: Infinite looping of slides for continuous scrolling.
- Autoplay: Automatically cycles through slides with customizable speed.
- Lazy Loading: Loads images on demand to improve performance.
- Touch/Drag Support: Enables smooth navigation via touch gestures and dragging.
- Navigation: Customizable controls for next/prev buttons and pagination.
- Center Mode: Center-aligns the active slide with surrounding slides partially visible.
- Edge Padding: Adds padding to the edges of the carousel.
- Slide by: Allows sliding by a specific number of items.
- Gutter Spacing: Adjusts the spacing between slides.
- Rewind: Returns to the first slide after reaching the end.
- Auto Height: Adjusts the carousel height based on the current slide.
- Custom Events: Provides event hooks for integrating custom behaviors.
- Accessibility: Built with accessibility in mind to ensure inclusivity.
- Nested Carousels: Supports multiple carousels within each other.
David Deutsch
17- Carousel
This is a small lightweight and flexible Carousel class that allows you to build fully functional, advanced Carousels with minimal javascript and markup.
This library is built using native vanilla javascript (for performance) and adheres to latest ECMAScript specs. Supports IE10+, all major browsers and even mobile.
markcellus18- Carousel-Carousel
Carousel-Carousel is a minimalist and lightweight JavaScript library designed to create simple, accessible, and responsive carousels. Focused on providing a straightforward solution for building carousels, this library emphasizes ease of use and compatibility across different devices and screen sizes.
Carousel-Carousel ensures a smooth user experience with features like keyboard navigation, touch support, and customizable options, all while maintaining a small footprint without external dependencies.
It is an ideal library for developers who need a basic yet functional carousel solution, Carousel-Carousel is perfect for integrating into any web project with minimal setup.
estelle19- Vue Agile
Vue-Agile is a powerful and responsive carousel component for Vue.js, inspired by Slick. Itβs touch-friendly, supports Server-Side Rendering (SSR) with Nuxt.js, and operates without any jQuery dependency.
Vue-Agile is designed to provide a seamless, modern carousel experience for Vue.js applications, offering flexibility and ease of use for developers.
lukaszflorczak20- Image Slider
This slider is made with html css and js. It uses jquery to fade between images automatically and through navigation buttons or through pagination bullets. This Slider is Made/Customized for standard use, as a banner or ad slider.
ArslanAmeer21- Svelte Carousel
The awesome carousel component for Svelte 3.
vadimkorr22- Re Carousel (React)
Minimal carousel component for React.
amio23- Accessible Slick
Accessible-Slick is a modified version of the Slick carousel that enhances accessibility. Itβs designed to ensure that carousels are more inclusive by adding ARIA (Accessible Rich Internet Applications) attributes and improving keyboard navigation.
This project makes it easier for developers to create carousels that are usable by everyone, including those with disabilities, while maintaining the features and functionality of the original Slick carousel.
Accessible36024- Angular Gallery
This is a small Angular Gallery, Carousel and Lightbox library.
MurhafSousli25- Svelte Swipe
Swipable items wrapper component for Svelte π₯ π₯ (zero dependencies).
SharifClick26- Sidebar Swipe
This is a Sidebar Swipeable ideally for touch screen devices.
Anyass327- Animotion
Animotion is a presentational framework for creating beautiful slides and visualizing ideas with code using Svelte, Reveal.js and Tailwind CSS.
animotionjs28- Virtua (React, Vue, Solid, and Svelte)
A zero-config, fast and small (~3kB) virtual list (and grid) component for React, Vue, Solid and Svelte.
inokawa
