Swiper Slider Animation | Autoplay, Pagination Progress, and Text Reveal Effect
This tutorial shows how to create a slider animation with Swiper JS. It includes an outer slider with autoplay, pagination progress bars, text reveal animation, and smooth slide transitions, and an inner slider with a creative effect. The two sliders are connected and move together. You will learn how to style the layout, control animations, design the progress bar, and make the sliders fully responsive for all screen sizes.
📂 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:40 – HTML
1:50 – CSS: Style the sliders and create the text reveal animation
4:18 – JavaScript: Set up and connect the sliders
5:26 – CSS: Style the pagination and add media queries
6:49 – JavaScript: Activate the pagination progress animation
8:27 – JavaScript: Set the autoplay