Sync Horizontal Image + Vertical Text Sliders | Swiper JS
This tutorial shows how to create two synced sliders using Swiper JS, HTML, CSS, and JavaScript. One slider displays horizontal images, and the other shows vertical text. Both sliders move together when using the mouse wheel or navigation buttons. The design is responsive, so it works well on all screen sizes. Swiper’s controller module links the sliders and breakpoints to adjust spacing on different devices. This step-by-step guide explains how to build, style, and sync both sliders.
📂Swiper JS: https://swiperjs.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:39 – HTML: Image & Text Sliders Setup
2:03 – CSS: Styling Sliders, Buttons, and Responsive Layout
6:28 – JavaScript: Swiper Initialization and Syncing Sliders