Build an Image Carousel with React in 5 Minutes (incl. Gesture Support, Hooks)



? Build Amazing React Apps @ Code Artistry ►► https://codeartistry.io

? Become a Web & Mobile Master: The Complete Subscriber Plan ►► http://bit.ly/subscribe-codeartistry

? SUBSCRIBE TO CODE ARTISTRY ?
https://www.youtube.com/channel/UC-kHm7pG884IYQiYwqJWv9A?sub_confirmation=1

? SUPPORT THE CHANNEL ►► https://paypal.me/codeartistry

⭐ FOLLOW ON SOCIAL MEDIA
Twitter • https://twitter.com/codeartistryio
Github • https://github.com/codeartistryio
Reddit • https://www.reddit.com/user/CodeArtistry

Want to Build a Complete Image Slideshow and Carousel with React with great features like Gesture Support and made with Hooks? In this tutorial, we’ll see how to do just that, all in around 5 minutes. react image gallery

#CodeArtistry #reactjs #Youtube
———
Starting Code: https://codesandbox.io/s/start-image-gallery-6374d
Final Code: https://codesandbox.io/s/final-image-gallery-hw6ic

Related Posts
How to leverage React Native to build mobile apps fast

You would have to close your eyes when reviewing 2019's Stack Overflow Developer Survey Results and not notice the most Read more

Let's Build a React Native App: React Navigation

I'm building a React Native application and I'm taking you along for the ride! I'll be vlogging my experience of Read more

React Native Tutorial – How to Build a Mobile App Using React Native

Learn more advanced front-end and full-stack development at: https://www.fullstackacademy.com React Native is a framework for creating mobile apps using only Read more

Develop Android And IOS Apps – React Native | Frankeey

Join Now: https://frankeey.com/ How To BUY: https://www.youtube.com/watch?v=XcssQ... Contact Us: 9884014753 Requirements: A Windows PC, Mac or Linux Computer Basics Of Read more

17 thoughts on “Build an Image Carousel with React in 5 Minutes (incl. Gesture Support, Hooks)”

  1. Thanks for the tutorial.
    I tried your code in a reelle Web page, I noticed that after the last photo, I was directly brought back where is this slider no matter where of the page where I was (example at the foot of the page )

    Reply
  2. Where would I have to insert this if I already have a function called App? Can I just use a slideshow instead of an app? Somehow I'm confused where I can insert the code into an existing website.

    Or lets say I want to export this slideshow and import on index.js how would this work?

    Reply
  3. Love this! How can I make info show on click/tap? Either as a pop-up or like a flipping card?

    Don't even need a video. Just point me in the right direction please! ?

    Reply
  4. Do I need the react-gesture-gallery dependency to just have the image slider work? And is there a way I can use imported assets or file paths on my images array?

    Reply
  5. I'm using this on a page with a nav bar and headings above it (the only difference from the code provided is that I exported it at the end and imported it to render on Routes rather than using reactDOM to put it on a .html.erb page). When the page first loads the nav bar and heading are visible, but as soon as the image switches the page focus "jumps" so that the carousel is at the top. You can scroll up to see the heading and nav bar again, but when the image switches again the page jumps again. Anyone have any idea what causes this and/or how to fix it?

    Reply
  6. Great video. Can you show a custom video player with controls or a netflix type of carousel with multiple sliding items using React? Thanks 🙂

    Reply

Leave a Comment