Swiper JS Tutorial: Responsive Image Slider with SVG Filter | HTML CSS
In this tutorial, an image slider is created using Swiper JS, and a unique SVG filter effect is applied to the slides. The images are slightly rotated to give a random look, and when an image becomes active, it is scaled up and its grayscale is reduced to make it stand out. CSS is used for the layout and animations, and JavaScript is used to control the slider's behavior, including autoplay and mouse interaction. A special visual effect is added to each image with the SVG filter, making the slider both interactive and visually appealing.
⭐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:47 – HTML
1:36 – Adding SVG filter
2:03 – CSS
5:04 – Set SVG filter based on slides
5:30 – Style the active slide
6:02 – Swiper JS functionality
7:02 – Centering the active slide