React Image Slider with Swiper JS from scratch

Learn how to build an image carousel in React using Swiper JS in react. One of the most important things a front end developer will have to do over and over again is creating a slider. So it's best to know the sure and easy way to create a slider in React. Swiper js is a library with its own api that lets you easily create slider functionality and expand on it with many customizations. Swiper JS has a react component you can use. CONNECT ON MY DISCORD: https://discord.gg/5zsdrxH8m8 Twitter:https://twitter.com/omarel GitHub: https://github.com/oelbaga #react #slider #swiperjs 0:00 Intro 02:00 boiler plate/installations 03:00 Swiper imports 04:30 Swiper Element 04:51 Swiper Attributes 05:50 Swiper Slide Element 06:50 Slider CSS styles 08:50 Adding the Fade Effect 09:40 Change color of arrows (Global) 10:40 Custom arrows (Global) 12:00 Custom arrows (Scoped CSS) 14:00 Swiper Init fix for custom arrows 15:10 Fix Swiper Slide Flicker 15:35 Create slides from json Debugging Notes: When upgrading from React 17 to React 18, I noticed that a custom className on the swiperSlide component is no longer allowed and throws an error: TypeError: undefined is not an object (evaluating 'swiper.params.slideClass') and the docs say it's no longer supported. So you should do custom CSS on the element inside the SwiperSlide Twitter: https://twitter.com/omarel