Want to have an elegant and easy-to-use Carousel/Slider component showcase images, products, logos, quotes testimonials?
Here is a constantly updated list of the 10 best Carousels (Sliders) we published on CSSScript.com.
All of them are implemented in Vanilla JavaScript or Pure CSS. No 3rd libraries or frameworks are needed.
I hope you like it and don’t forget to spread the world.
Originally Published Nov 07 2017, updated Jan 02 2023
Table Of Contents:
Vanilla JavaScript Carousel:
1. Responsive and Flexible Mobile Touch Slider – Swiper
A powerful javascript library to implement responsive, accessible, flexible, touch-enabled carouses/sliders on your mobile websites and apps.
2. Responsive Slider Plugin with CSS3 Transitions – Glide.js
A lightweight, flexible slider/carousel plugin (ES6 JavaScript slider/carousel library) that helps you create responsive and touch-enabled sliders with fast and performant CSS3 transitions.
3. Tiny Content Slider with Pure JavaScript
A tiny yet feature-rich content slider built using pure JavaScript and plain Html / CSS.
4. Feature-rich Framework-agnostic Touch Slider Library – keen-slider
A multifunctional, framework-agnostic slider library that can be used to transition between any elements with touch & drag events.
5. Basic Image Carousel With Pure JavaScript – siema.js
A minimal vanilla JavaScript plugin used for generating a basic yet customizable and draggable slider / carousel without any 3rd dependencies.
6. Full-featured Slider/Carousel Plugin – Splide
A lightweight, responsive, accessible, mobile-friendly, full-featured slider/carousel plugin implemented in pure JavaScript and CSS/CSS3.
7. Mobile-friendly Carousel/Scroller In Pure JS – Glider.js
A lightweight but powerful JavaScript plugin to create responsive, accessible, touch-enabled carousels/scrollers for the web.
8. embla-carousel
The embla-carousel JavaScript library helps developers to create a responsive, customizable, mobile-friendly carousel component on the web app.
9. egjs-flicking
Reliable, flexible and extendable carousel.
10. Lightweight Touch-enabled Swiper In Pure JavaScript – tiny-swiper
A small yet fully configurable and touch-enabled swiper for creating responsive, mobile-friendly sliders, one-page scrolling webpages, single-page applications, and more.
CSS Only Carousel:
1. Netflix Like Hover Carousel In Pure CSS – flix-carousel
flix-carousel is a pure CSS library to create an interactive hover carousel inspired by Netflix.
2. 3D Perspective Carousel with CSS3 Transforms
A pure CSS 3D perspective carousel that automatically rotate through a group of html content using CSS3 transforms.
3. Automatic Rotate Carousel In Pure CSS
A CSS/CSS3 only image carousel that automatically rotates through a group of elements with a fancy rotation animation.
4. Cover Flow Style Card Carousel In Pure CSS
A stylish, responsive, cover flow style card carousel implemented in pure CSS and lable+radio tricks.
5. Responsive Image Carousel With Pure HTML / CSS – SheetSlider
A CSS library used to generate a responsive, infinite-looping carousel slider from a list of images. Developed with pure CSS without any javascript.
Read More:
Want to have a carousel slider implemented in jQuery or Pure CSS? Check out our Best Carousels post.