Swiper Cards Effect Slider with Active List Animation
This tutorial shows how to create a card effect slider using Swiper JS. The slider is linked with a list of items, and both work together interactively. When the slide changes, the related list item becomes active, and when we click a list item, the slider moves to the correct slide. It also shows how to control slides with JavaScript and add active states using CSS transitions. It is fully responsive and works well on all screen sizes.
📂 Swiper JS: https://swiperjs.com/get-started
🏞️ The images are designed by Freepik: https://www.freepik.com
⭐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:40 – HTML
2:05 – JavaScript: Swiper Setup and Functionality
3:12 – CSS