gatsby-image-background-slider
Lazy-loaded background images, with a simple fade transition between them, using
gatsby-image
. Inspired byreact-background-slider
, except for—well—the obvious.
Why?
I wanted to have a nice, simple slideshow of high-resolution background images. I also didn't want to lock the main thread with ugly chunks of said images. Thus, I resorted to making the best reinvention of the wheel I could muster for a background image slideshow with lazy-loading.
Install
npm install --save gatsby-image-background-slider
Usage
Quick unordered background slider
component file (i.e. layout.js)
import React from 'react' import BackgroundSlider from 'gatsby-image-background-slider' const Layout = children <> <main>children</main> <BackgroundSlider = /> </>
gatsby-config.js
plugins: resolve: `gatsby-source-filesystem` options: name: `backgrounds` path: `/src/bg` // wherever background images are stored
Configured background slider
component file (i.e. layout.js)
import React from 'react' import BackgroundSlider from 'gatsby-image-background-slider' const Layout = children <> <main>children</main> <BackgroundSlider = = // ( , ) = // = // // ( ) `` = // = > /* Captions in sync with background images*/ <div>Woof</div> <div>Meow</div> <>/* Giraffes don't talk; [they aren't real](https://chivomengro.com/2017/10/23/the-truth-comes-out-giraffes-are-a-hoax/) */</> <a ="https://en.wikipedia.org/wiki/Tasmanian_devil#Conservation_status"> I could use a hand </a> <div>I need to find better hobbies</div> </BackgroundSlider> </>
gatsby-config.js
plugins: resolve: `gatsby-source-filesystem` options: name: `backgrounds` path: `/src/bg` // wherever background images are stored
License
MIT © GabeEddyT