Cube Effect Slider with Controller & Autoplay in React | Swiper JS |
This tutorial covers building a cube effect slider with controllers using React and Swiper JS. The project features two synchronized sliders: one for text descriptions and another displaying corresponding images with a 3D cube rotation effect. The sliders are connected through the Controller module in Swiper, enabling seamless navigation between the text and images. The project also utilizes the fade effect for smooth transitions in the text slider, along with autoplay and mousewheel control for enhanced interactivity. Additionally, the sliders are fully responsive, adapting to various screen sizes using CSS grid. This tutorial provides a step-by-step guide to integrating Swiper JS modules in React, customizing effects, and managing multiple synchronized sliders.
📂 Swiper React Components: https://swiperjs.com/react
⭐ Lists:
Mini React Projects: • Mini React Projects
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
1:05 – Starting with React
1:39 – Creating the slider
4:50 – CSS
7:45 – Media queries to make it responsive
8:48 – Adding blinking animation to the border of cube
9:03 Activating the autoplay