Vertical Slider with CSS Animations in React | Swiper JS |
This tutorial demonstrates how to a vertical slider using Swiper JS and React. The project features a series of slides, where each slide includes animated circle elements and images with transparent backgrounds that respond to the isActive condition, triggering specific animations when a slide becomes active. The slider is built using Swiper JS features like mousewheel sensitivity and pagination with clickable bullets. You'll also see how to create a dynamic and responsive slider. This video covers the full code structure, CSS animations, and the integration of Swiper JS components for a smooth and responsive slider experience.
📂 Swiper React Components: https://swiperjs.com/react
🏞️ The images used in this project are designed by Freepik: https://www.freepik.com
⭐ 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:
X: https://x.com/ecemgo
Codepen: https://codepen.io/ecemgo
GitHub: https://github.com/ecemgo
TikTok: / ecemgo
🕔 Timestamps:
0:00 – Intro
0:50 – Starting with React
1:40 – Creating the slider
4:09 – CSS
8:14 – Media queries to make it responsive