Swiper Autoplay Slider with Clip-Path Animation | HTML, CSS, Javascript Tutorial
This tutorial shows how to build a responsive autoplay slider using Swiper JS with a clip-path animation effect. It includes creating the HTML structure, adding CSS animations and transitions, and implementing Swiper JS settings for autoplay and slide effects. It also explains how to use the fade effect for smooth transitions, customize pagination bullets with gradients, and manage slide animations with CSS keyframes. Additionally, we include media queries for responsive design and demonstrate how to disable backward navigation and touch controls for smoother autoplay behavior.
📂 Resources:
1) Swiper JS: https://swiperjs.com/get-started
2) Keyframes for the animation: https://github.com/ecemgo/assets/blob...
⭐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:37 – HTML
1:25 – CSS: Grid layout, clip-path animation & media queries
4:55 – Swiper JS functionality
6:00 – Why we disable backward navigation