Animated 3D Slider with Swiper JS and Splitting.js
In this tutorial, we create an animated 3D slider using Swiper JS and Splitting.js. It is a step-by-step guide to learning about Swiper coverflow effect, mousewheel control, CSS 3D transforms, responsive design, and text animations using Splitting.js. Also, all images used in this project are AI-generated and optimized for the slider.
This project includes:
3D coverflow slider
Animated text with Splitting.js
3D transform with CSS
Mousewheel navigation
Responsive design with media queries
📂 Resources:
1) Swiper JS: https://swiperjs.com/get-started
2) Splitting.js: https://splitting.js.org/
⭐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:20 – Sample AI-generated Images
0:37 – HTML
2:04 – Swiper JS Functionality
2:42 – CSS: 3D Effects and Media Queries
6:32 – Splitting.js: Text Animation