Circular Rotating Slider with Animations using Vanilla Javascript & CSS
This tutorial shows how to create a circular rotating slider with smooth animations using HTML, CSS and Javascript. The project features a circular layout for slides, rotation effects triggered by navigation buttons, and animations controlled through custom CSS keyframes. It also includes techniques for managing active slides, handling transitions, and updating styles dynamically with Javascript. Splitting.js is also used to create dynamic text animations by splitting text into individual characters, allowing for unique animations.
📂 Resources:
1) Splitting.js: https://splitting.js.org/
2) Font Awesome CDN: https://cdnjs.com/libraries/font-awesome
3) Font Awesome Icons: https://fontawesome.com/icons
🏞️ 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 – Intro
0:52 – HTML
2:30 – CSS
5:43 – Media queries
6:33 – Javascript
9:39 – Text animation with Splitting.js