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 06 2025
Table Of Contents:
Vanilla JavaScript Carousel:
1. Responsive and Flexible Mobile Touch Slider – Swiper
A powerful and modular javascript library to implement responsive, accessible, flexible, touch-enabled carouses/sliders on your mobile websites and apps. Can be used as a jQuery plugin.
Features:
- Responsive design
- Small and fast
- Fully accessible
- Supports any html elements, not only images
- Supports Vertical/Horizontal animations and swipes
- Cool transition effects: Fade, Flip, 3D Cube, 3D Coverflow, Parallax
- Hash navigation
- Grid layout
- Image lazy load
- Virtual Slides for better performance
- Keyboard interactions
- RTL layout
- Works on iOS, Android and latest Desktop browsers
- Available for Angular, React, Vue, and Svelte.
2. Responsive Slider Plugin with CSS3 Transitions – Glide.js
A lightweight, flexible ES6 JavaScript slider/carousel library that helps you create responsive and touch-enabled sliders with fast and performant CSS3 transitions.
Features:
- Lightweight and easy-to-use
- Modular and extendable.
- Supports of swipe event on touch devices
- Arrows, bullets, and Keyboard navigation
- Auto play
- Pause on hover
- CSS3 transitions with fallback to older browsers
- Supports almost all the html elements
- Cross browser, supports all the modern web / mobile browsers
3. Draggable & Touch-friendly Carousel In Vanilla JavaScript – embla-carousel
The embla-carousel JavaScript library which helps developers to create a responsive, customizable, mobile-friendly carousel component on the web app.
4. Tiny Content Slider with Pure JavaScript
A tiny yet feature-rich content slider built using pure JavaScript and plain Html / CSS.
5. Full-featured Slider/Carousel Plugin – Splide
A lightweight, responsive, accessible, mobile-friendly, full-featured slider/carousel plugin implemented in pure JavaScript and CSS/CSS3.
Features:
- Touch-enabled. Supports both touch swipe and mouse drag.
- Smooth slide & fade transitions based on CSS3.
- Image lazy loading.
- Supports nested sliders.
- Supports HTML video, YouTube or Vimeo videos.
- Allows multiple items on a slide.
- Autoplay.
- URL hash change.
- RTL mode.
- Horizontal and vertical directions.
6. Flip Through Elements In A 3D Space – Carousel.js
A vanilla JavaScript carousel plugin to flip through elements in a 3D space just like the Cover Flow.
7. Multi-item Carousel For Bootstrap 5
Just another JavaScript & CSS extension to create a responsive and multi-item carousel using Bootstrap 5’s carousel component.
8. Infinite Carousel Slider With Autoplay
A tiny, flexible, infinite-looping, auto-rotating carousel slider written in pure JS without jQuery.
9. Basic 3D Carousel In Pure JavaScript
This is a very basic 3D coverflow style carousel/rotator implemented in pure JavaScript and CSS/CSS3.
10. Scroll-triggered Card Carousel With GSAP
An infinitely scrolling card carousel implemented with the GSAP Animation Library.
CSS Only Carousel:
1. Responsive Carousel Slider With No JS – Carousel.CSS
A pure CSS slider library to display HTML content in a responsive horizontal carousel format without the overhead of a JS plugin.
2. Infinite Marquee Carousel With Pure CSS
A lightweight project that allows you to build automatic, infinitely scrolling carousels using only CSS.
3. Netflix Like Hover Carousel In Pure CSS – flix-carousel
A pure CSS library to create an interactive hover carousel inspired by Netflix.
4. 3D Perspective Carousel with CSS3 Transforms
A CSS library used to generate a responsive, infinite-looping carousel slider from a list of images. Developed with pure CSS without any javascript.
5. Responsive Image Carousel With Pure HTML / CSS – SheetSlider
A pure CSS 3D perspective carousel that automatically rotate through a group of html content using CSS3 transforms.
Read More:
Want to have a carousel slider implemented in jQuery or Pure CSS? Check out our Best Carousels post.