ZerotoHero
Published in

ZerotoHero

Gatsby {Carousel}

Why Gatsby?

Why would we need a framework on top of a framework (or a library)? Isn’t React a tool that “helps developers build websites and apps”? This is a reasonable question. It is often posed about tools such as Next.js.

“Gatsby is a free and open-source framework based on React that helps developers build blazing-fast websites and apps.” According to the Gatsby team.

React is a library meant to provide a particular set of core functionality for developers to leverage. It is intended to be lightweight and broadly applicable.

Gatsby, on the other hand, is “a static PWA (Progressive Web App) generator. You get code and data splitting out-of-the-box. Gatsby loads only the critical HTML, CSS, data, and JavaScript, so your site loads as fast as possible. Once loaded, Gatsby prefetches resources for other pages, so clicking around the site feels incredibly fast.”

Gatsby is a static site generator that leverages React. With that, I decided to give a try, and I start to build a few websites. I bump in a simple situation, how to make a Carousel in Gatsby?

I found several different ways to solve it, and I tested 3. I’m going to talk about two (2) here.

Gatsby Background Image

Gatsby has a fantastic set of plugins, especially to handle imagens; however, none is a carousel. So, the “native” solution will be using the gatsby-background-image plugin to build a carousel.

You can check the result here, and the source code at Github. But, if you want to start from scratch. You can follow these steps:

1. Clone Gatsby Starter Defaulf (github)

gatsby new gatsby-starter-default https://github.com/gatsbyjs/gatsby-starter-default

2. Install Gastby Background Image (gastsby)

cd gastsby-starter-default

npm install --save gatsby-background-image

3. Start to create the {Background-Carousel}.

Create the file at componentes. Use my file as a starting point.

React Bootstrap

Bootstrap has a vast library, and one of them is the Carousel, which works all the time. So, I give a try, and the result was elegant. The only caveat between Gatsby and React-Bootstrap is the conflict on the CSS from bootstrap.

You can check the result here, and the source code at Github. But, if you want to start from scratch. You can follow these steps:

1. Clone Gatsby Starter Defaulf (github)

gatsby new gatsby-starter-default https://github.com/gatsbyjs/gatsby-starter-default

2. Install React Bootstrap (bootstrap)

cd gastsby-starter-default

npm install react-bootstrap bootstrap

3. Start to create the {Carousel}.

Create the js. Use my file as a starting point.

Share in the comments other solutions that you tested for Carousel with Gatsby.

--

--

--

Recommended from Medium

CAUTION: (CODE) CLEANING IN PROGRESS

React Basics: keys

REACT APP + NODE TO HEROKU DEPLOY

什麼是JWT?

5 Essential NPM Packages You Must Know

React State Management with HOOK

Set up your Rails and React apps for Heroku right from the start

Array Methods

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Taric Andrade

Taric Andrade

Entrepreneurial minded, passionate for tech, driven by intellectual curiosity — curating knowledge to solve problems and create change.

More from Medium

Ingredients for Better Accessibility — Part Two: Customizing the Recipe

A chef sprinkles seasoning on a sizzling pan of spicy food

How I Wrote My First React Library

Agile for Food Delivery App in India

A beginner’s guide to designing for transportation and logistics