React Card Slider with Swiper JS and CSS Animation
This tutorial shows how to create a React card slider step by step using Swiper JS and CSS animation. This interactive slider features the popular series with detailed content, including titles, scores, descriptions, and genres. The project utilizes custom CSS properties for smooth transitions and animations, making each slide interactive and visually engaging. You'll discover how to implement pagination, centered slides, and responsive breakpoints to ensure the slider works seamlessly across all devices.
📂 Swiper React Components: https://swiperjs.com/react
⭐ Lists:
Mini React Projects: • Mini React Projects
Swiper JS: • Swiper JS
GSAP: • GSAP
Slider with Vanilla Javascript & CSS: • Slider with Vanilla Javascript & CSS
Background Animation: • Background Animation
CSS Hover Effect: • CSS Hover Effect
👩💻 My Social Profiles:
Codepen: https://codepen.io/ecemgo
GitHub: https://github.com/ecemgo
TikTok: / ecemgo
🕔 Timestamps:
0:00 – Intro
0:59 – Starting with React
1:54 – Installing Swiper JS and creating the slider
6:01 – CSS
15:24 – Media queries to make it responsive