Skip to content

A 3D card slider built using only HTML & CSS, leveraging CSS transform positioning to create a realistic three-dimensional plane. This interactive slider features smooth transitions, depth effects, and a sleek, responsive design—all without JavaScript. 🚀✨

Notifications You must be signed in to change notification settings

Chelsey20/card-slider

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Card Slider – JavaScript, HTML & CSS (Swiper.js)

✨ A sleek and responsive card slider built using JavaScript, HTML, CSS, and Swiper.js. This project leverages the swiper-bundle package to provide smooth transitions, touch support, and customizable navigation for a seamless sliding experience.

Features

✅ Built with JavaScript, HTML, and CSS

✅ Swiper.js Integration – Smooth and customizable slider functionality

✅ Fully Responsive – Works on all screen sizes

✅ Touch & Mouse Support – Swipe gestures for mobile devices

✅ Navigation Controls & Pagination – Customizable slider experience

✅ Minimalist & Modern Design

Preview

🔗 Live Demo : https://chelsey20.github.io/card-slider/

Installation

Clone the repository:

Navigate to the project folder:

  • sh
  • Copy
  • Edit
  • cd card-slider
  • Open index.html in a browser or run a local server.

Technologies Used

HTML5 – Structure

CSS3 – Styling and animations

JavaScript – Functionality

Swiper.js – Slider library for smooth transitions

Feel free to fork this project, submit pull requests, or customize the slider to fit your needs! 🚀

About

A 3D card slider built using only HTML & CSS, leveraging CSS transform positioning to create a realistic three-dimensional plane. This interactive slider features smooth transitions, depth effects, and a sleek, responsive design—all without JavaScript. 🚀✨

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published