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: https://www.youtube.com/playlist?list=PLes5YJFlROjF1Lf2RZykNeD-q6KuUYXmn
- GSAP: https://www.youtube.com/playlist?list=PLes5YJFlROjHOLLJBZkwpfUihD_ouui8w
- Slider with Vanilla Javascript & CSS: https://www.youtube.com/playlist?list=PLes5YJFlROjE2USc2RbzJXLzANyxijsUb
- Background Animation: https://www.youtube.com/playlist?list=PLes5YJFlROjE3QNHDn6UNzP5fiMhzQlze
- CSS Animation: https://www.youtube.com/playlist?list=PLes5YJFlROjGxfF4QgD4QwR6noJyCI_8f
- Login Form: https://www.youtube.com/playlist?list=PLes5YJFlROjHBcp9x-HzxGoLC8ibuk8Ft
👩💻 My Social Profiles:
- X: https://x.com/ecemgo
- Codepen: https://codepen.io/ecemgo
- GitHub: https://github.com/ecemgo
- TikTok: https://www.tiktok.com/@ecemgo
- Bluesky: https://bsky.app/profile/ecemgo.bsky.social
🕔 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