Swiper Slider with Parallax and Scale Effects
This tutorial shows how to build a Swiper slider with parallax and scale (zoom) effects. It is a responsive slider that displays images with zoom and parallax movement. We use Swiper JS options like slidesPerView, centeredSlides, parallax, and mousewheel control.
📂 Swiper JS: https://swiperjs.com/get-started
🏞️ The images are designed by Freepik: https://www.freepik.com
⭐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 – Introduction
0:35 – HTML
1:35 – CSS
3:03 – JavaScript: Swiper JS configuration