Synced Sliders with Swiper JS | Vertical Slider with Creative Effect
This tutorial shows how to build a synchronized vertical slider using Swiper JS. It includes two connected Swiper sliders: a main text slider and an inner image slider that move together in sync. We use the Swiper controller to synchronize the sliders, along with navigation buttons and mouse wheel control to manage slide transitions. The layout is fully responsive and uses media queries for different screen sizes. It also includes CSS underline animations and creative Swiper effects for slide transitions.
📂 Swiper JS: https://swiperjs.com/get-started
⭐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:48 – HTML
2:34 – JavaScript: Swiper setup and synchronization
3:39 – CSS: Layout, sliders, and media queries