Collection of free Tailwind CSS slider components from Codepen and other resources.

Demo image: Simple Image Slider

Author

  • Hafiz_Dev

Made with

  • HTML / CSS / JS

About a code

Simple Image Slider

A simple image slider is used to display a bunch of images.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: alpine.js

Tailwind version: 3.0.18

Demo image: Carousel

Author

  • zoltanszogyenyi

Made with

  • HTML / CSS / JS

About a code

Carousel

Use this Tailwind CSS carousel slider component from Flowbite to create a collection of images that can be navigated between using the control buttons and indicators.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: flowbite.js

Tailwind version: 3.0.18

Demo image: Image Slider

Author

  • mohau-r

Made with

  • HTML / CSS / JS

About a code

Image Slider

Image slider/carousel with AlpineJS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: alpine.js

Tailwind version: 2.2.4

Demo image: Card Carousel

Author

  • maddog986

Made with

  • HTML / CSS / JS

About a code

Card Carousel

Card carousel using tailwind JIT mode and peer-* to control rotating images.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Demo image: Fully Interactive Frames Slider

Author

  • amirrahman132132

Made with

  • HTML / CSS / JS

About a code

Fully Interactive Frames Slider

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: alpine.js

Tailwind version: 2.0.3

Demo image: Onboarding Slider

Author

  • Scott Windon

Made with

  • HTML / CSS / JS

About a code

Onboarding Slider

AlpineJS touch swipe onboarding welcome slider.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: alpine.js

Tailwind version: 2.0.2

Demo image: Carousel Slider with TailwindCSS and jQuery

Author

  • Axel

Made with

  • HTML / CSS / JS

About a code

Carousel Slider with TailwindCSS and jQuery

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Tailwind version: 1.2.0

Demo image: Carousel with Only Tailwind CSS + Alpine.js

Author

  • Simeon

Made with

  • HTML / CSS / JS

About a code

Carousel with Only Tailwind CSS + Alpine.js

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.2.0

Demo image: Stripe Carousel Clone

Author

  • r3oath

Made with

  • HTML / CSS

About a code

Stripe Carousel Clone

A clone of the carousel as seen on the Stripe website.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.0.4