3D Flip Card Slider with Swiper JS | HTML CSS Swiper JS

Опубликовано: 25 Май 2026
на канале: Ecem Gokdogan

9,907

171

This tutorial guides you on creating a 3D flip card slider using Swiper JS and CSS. It features interactive slides that flip between front and back views, complete with background blur effects, radial gradients, and a smooth perspective animation. Each slide includes styled buttons and centered text with a flip effect, triggered as users navigate between slides. You'll also see how to customize Swiper JS pagination bullets for a responsive design.

⭐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:47 – HTML
1:37 – Swiper JS functionality
2:29 – CSS
5:26 – Javascript functions for flipping the card