Vanilla React Image Slider from scratch - just 30 minutes - even easier than javascript sliders

Описание: When we start development sliders seem really daunting. So we download so image slider packages, but they are actually quite easy. So let's learn how to make some basic react image sliders without the need for any custom packages. It's nice to be able to make a simple slider that can be used in many places on your react apps. Interestingly, I think vanilla react sliders are actually 50% easier to make than vanilla javascript.

CONNECT ON MY DISCORD:
  / discord  

Twitter:  / omarel  
GitHub: https://github.com/oelbaga

0:00 intro
1:00 Demo
2:30 Basic Component Setup
3:30 The Slider HTML
4:30 The Slider Arrows HTML
6:30 Slider CSS
9:20 Arrows CSS
11:15 Map over images object
14:00 Active/Prev/Next CSS classes
17:00 -The JavaScript
17:01 Detect Active/Next/Prev Slides JavaScript
19:00 Connect Active/Next/Prev classes to html
20:00 2 conditions for loop on first and last slide
24:00 Next Slide Function
27:35 Previous Slide Function
30:00 Add CSS Slide transitions
31:00 Change slide to Fade Transitions

#reactimageslider #react #imageslider

If you do want the npm slider package I created for this head over to uiworkspace.
Get early access to my project/
A library of pre-built user interface layouts and components you can place on any react site: https://uiworkspace.com

--GitHub REPO Enjoy! --
https://github.com/oelbaga/vanilla-re...