Responsive Swiper Slider with CSS Animations | Fade Effect + Mousewheel and Keyboard Controls
This tutorial guides you in creating a responsive Swiper slider with CSS animations. This slider includes fade effect, loop, pagination, mouse wheel, and keyboard controls.
🏞️ The images are designed by Freepik: https://www.freepik.com
📂 Resources:
1) Swiper JS: https://swiperjs.com/
2) Background Image: https://www.freepik.com/free-vector/w...
3) Clip-Path Frame: 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:28 – HTML
1:53 – CSS: Layout, Clip-Path, Animations and Media Queries
7:01 – JavaScript: Swiper JS Initialization and Controls