Swiper JS Autoplay Slider with Circular Timer and Text Animation
In this tutorial, we build an autoplay slider using Swiper JS, HTML, CSS, and JavaScript. The slider includes a circular timer animation on each slide and a letter-by-letter text animation using Splitting.js. We also show how to create a circular progress bar using conic-gradient and setInterval.
📂 Resources:
1) Swiper JS: https://swiperjs.com/get-started
2) Splitting.js: https://splitting.js.org/
🔍 Live Preview (Demo): https://super-heliotrope-2df593.netli...
⭐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:29 – HTML
2:02 – CSS
4:18 – JavaScript: Swiper Setup & Timer Animation
7:19 – Splitting.js: Text Animation