How to Create a React Bootstrap Carousel from a folder of Images using Gatsby Image
Leverage the power of Gatsby Image to query a folder of images to create a React Bootstrap Carousel. Plus with Gatsby Image you can crop images for a perfect carousel.
Combine the power of Gatsby Image with the usability of React Bootstrap Carousels to produce a powerful, fast, useful slideshow for your users to view and enjoy.
Leverage the file name as the alt information and carousel caption.
Download the source code:
https://adesignerwhocodes.ck.page/9f6...
Table of Contents:
00:00 Introduction
01:15 Setup of image files and filenames
03:51 Pulling Images from GraphQL
07:13 Filtering & Sorting Images by relative directory
12:03 Gatsby Image in GraphQL
14:19 Implementing the GraphQL data into our index page
18:06 Mapping The Images from GraphQL
23:45 Querying the file names for alt information
25:24 Removing dashes and file extensions from alt info
28:32 Implementing the React Bootstrap Carousel
33:13 Adding captions to the carousel
34:43 Adjusting images that aren't the same size using GraphQL
38:39 One beautiful React Bootstrap Carousel
Thanks!
Haydn
// Helpful YouTube Playlists:
http://bit.ly/3rrHj9D Bootstrap for Web Designers & Developers
http://bit.ly/36HEYPZ React Bootstrap & Gatsby
http://bit.ly/3twVn3C Gatsby for Web Designers
// SHOP MY PRODUCTS!
○ A Visual Guide to the Bootstrap 5 Breakpoints (PDF) https://gumroad.com/l/zAKxE
// TAKE MY ONLINE COURSE
○ Gatsby Demystified https://bit.ly/gatsby-demystified
🛠 THE TOOLS & SERVICES I USE:
○ Where I buy my domain names (GoDaddy) - https://bit.ly/3v2GV2N
○ Email provider, lead generation and more! (ConvertKit) - https://bit.ly/3xbqwup
○ Graphic Design Tools, stock images and more (Canva Pro) - http://bit.ly/canva-pro-adwc
○ Website Hosting (Netlify) - https://www.netlify.com
► Join The Facebook Group!
/ adwcnation
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!
Hi there! Haydn Adams, BFA. I'm all about helping web developers and web designers build better websites, through code. Yes, coding and be difficult at first. But I'm here to demystify that. To make coding easy so that you can ultimately build a better website.
Got a question for me?
https://adesignerwhocodes.com/contact/
Watch video How to Create a React Bootstrap Carousel from a folder of Images using Gatsby Image online without registration, duration hours minute second in high quality. This video was added by user A Designer Who Codes 24 November 2020, don't forget to share it with your friends and acquaintances, it has been viewed on our site 2,799 once and liked it 30 people.