React Image Slider with Swiper JS from scratch

>> YOUR LINK HERE: ___ http://youtube.com/watch?v=4aJPgKLwAGY

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: • / discord • Twitter: / 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: • / omarel

#############################

New on site