3D Card Slider using Swiper JS | Flip on Hover and Hint Animation
This tutorial shows how to create a 3D card slider using Swiper JS. The active slide flips on hover to reveal back content. We use CSS 3D transforms, perspective, and translateZ to create depth and a realistic card flip effect. A hint animation runs when the active slide changes, making it clear that the card is interactive. To avoid animation conflicts, hover behavior is controlled with a JavaScript function. The slider supports mouse wheel navigation, clickable pagination, and responsive layout adjustments. On desktop, the card flips on hover. On mobile devices, the card flips when the active slide is clicked and flips back when clicking outside.
⭐Lists:
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:44 – HTML
2:06 – Javascript: Swiper Setup
2:44 – CSS: Layout, Card and Responsive Design
6:38 – Hint Animation