Smooth Autoplay Slider | Instant Pause on Hover | HTML CSS Swiper JS
This tutorial guides you on creating a Swiper JS slider with smooth autoplay and an instant pause effect on hover. The slider continuously scrolls through images and automatically stops when the mouse hovers over it, resuming when it leaves. You will also see how to animate the like button using CSS. This project includes HTML, CSS for slide styling and animations, and Javascript to control autoplay and add interactivity.
⭐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:
Codepen: https://codepen.io/ecemgo
GitHub: https://github.com/ecemgo
TikTok: / ecemgo
🕔 Timestamps:
0:00 – Intro
0:38 – HTML
1:36 – CSS
3:32 – Javascript