How to Use a React Bootstrap Carousel with Gatsby Image

Forget the jQuery Lightbox. They are hard to use on mobile devices and are circa 2015. Hello React Bootstrap Carousel. A modern day, user-friendly carousel you can use with Bootstrap on your Gatsby JS or other React website.

Combine the React Bootstrap Carousel with the Gatsby JS Image and you are cooking with gas. Carousels are heavy, data-wise because they are 3, 4, 5+ images all in the same place. That generally requires a server to pre-load ALL of the images. Not with Gatsby Image. It lazy-loads as you rotate the carousel, so that your page is incredible fast.

Download the source code:

I break down how to setup the Carousel and then go into the Gatsby Image integration: img vs Img.

Thanks,
Haydn

- - - - - -

⤵ Download ALL of my source codes & more!

Introducing ADWC PRO

ADWC Pro provides you with:

• Access to all the source codes for ALL projects
• Bootstrap Bootstrap online course (retail $79) w/ supplied source code
• All future online courses (Gatsby v5 course coming soon)
• Updates of ADWC and the web dev business
• and more!

Price:
Just $6/mo. or $49/year (32% off monthly)

-------

Got a question for me?

[joshteixeira]

Your videos deserve so much more attention, amazing tutorials, thank you!

[aereli]

Solid Video, Was exactly the help I needed

[waisus]

This is a great solution! I've been looking for a way to integrate a carousel into my project using gatsby plugins but this solution is by far the easiest to understand as I am too a Designer that "codes"

also for the the ~ i've known it as tilde and ` i've heard devs on other channels call it the back tick

[slawomirdyk]

Excellent video but I have an issue. I got a job as a junior front-end developer, and my first task is to create a landing page in Gatsby for an application on which the rest of my team is working. One of the landing page components is a react-bootstrap carousel with 6 images. I have done it exactly in the same way as in the tutorial. My problem is that when I try to load the landing page in my browser, I can see see the six digit (1., 2. 3., 4., 5., 6. - in a column order ) and six images (one by one) for two seconds. After two seconds, digits disappear, and I can see the proper working couresel . It seems that my page renders before the carousel bootstrap css styiling is loading. I used graphql and Img tag to load images to the carousel, I asked UX designers to create small size images and I sill have the same issue.

[barrypropes]

Hayden, question. Your Gatsby React BS demo doesn't address it, but can popover be used in conjunction with Carousel Item? I.e. make slide01 or slide02 have a popover window? Or can those components not be combined? Good stuff, thanks

[raheelarif]

If i have a html theme, where i will link css files and scirpts in gatsby please let me know.. as in reactjs we link these files in public index.html but how can in gatsby.js

[alwayssomewhere]

very helpful your tutorials, I hope you will soon have 1000 subscribers to monetize your videos

[eltonsantos]

Teacher, good afternoon! Im doing all the step like your class, but when I decide to include a image, it rise up, but it doesn´t appear on the page, appear only a tiny icon, but without image. Will be due to the fact I´m using the images with extension "jpeg"? Tks

[leocard]

Awesome, i don't know why, but my bootstrap page is outdated...

[nomanarshad]

Sir where does the slide01. Jpg slide02. Jpg and slide03. Jpg are stored in case of gatsby image concept?

[eltonsantos]

Hi my friend! I'm a brazilian guy and I'm very happy, because u are so good teacher! I'd like thank u for help me with this
subject matter, but I'd like to know if u get explain about: How to use React-Boostrap "NavBar" with Gatsby? It will be so good for us! See u teacher. Congrats for this class :)

[anonimo-xztg]

Hi,
Nice tutorial. I did run into couple of issues after implementing this. Would be really happy if you/ any of your viewers could help me fix this.