Responsive & Interactive Slider with Expanding Images | CSS & Vanilla Javascript
This tutorial shows how to create a responsive and interactive card slider with CSS and Vanilla Javascript. It also demonstrates how to dynamically adjust the number of cards, ensuring smooth animations and a flexible design. The slider features an overlay effect on active cards, transition delays for smoother interactions, and media queries to make the layout mobile-friendly. You’ll also see how to use CSS custom properties to calculate offsets and manage card positioning efficiently.
⭐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:26 – HTML
1:02 – CSS
4:06 – Javascript
4:48 – Style of active slide and overlay
5:56 – Setting the slider to display more or fewer images