Responsive Slider with Autoplay and Button Controls | Vanilla Javascript and CSS
This tutorial guides you on how to build a responsive slider using Vanilla Javascript and CSS. It covers how to add autoplay functionality that moves slides every 6.5 seconds and how to navigate between slides manually using buttons. You'll also see how to adjust the slider when the browser is resized for a smooth experience across different screen sizes. It will also demonstrate how to set slide opacity for smooth transitions and sync slide changes with buttons for a better user interface.
🏞️ The images used in this project 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:55 – HTML
2:05 – CSS
7:00 – Media queries to make it responsive
8:56 – Javascript
11:02 – Setting opacity and transitions using CSS
13:26 – Adding autoplay function