Neurotoxin Powered Marketing

    gatsby-image-background-slider

    0.0.4 • Public • Published

    gatsby-image-background-slider

    Lazy-loaded background images, with a simple fade transition between them, using gatsby-image. Inspired by react-background-slider, except for—well—the obvious.

    NPM JavaScript Style Guide

    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 
          query={useStaticQuery(graphql`
            query {
              backgrounds: allFile (filter: {sourceInstanceName: {eq: "backgrounds"}}){
                nodes {
                  relativePath
                  childImageSharp {
                    fluid (maxWidth: 4000, quality: 100){
                      ...GatsbyImageSharpFluid
                    }
                  }
                }
              }
            }
          `)}
        />
      </>
    )  

    gatsby-config.js

    plugins: [
      {
        resolve: `gatsby-source-filesystem`,
        options: {
          name: `backgrounds`,
          path: `${__dirname}/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 
          query={useStaticQuery(graphql`
            query {
              backgrounds: allFile (filter: {sourceInstanceName: {eq: "backgrounds"}}){
                nodes {
                  relativePath
                  childImageSharp {
                    fluid (maxWidth: 4000, quality: 100){
                      ...GatsbyImageSharpFluid
                    }
                  }
                }
              }
            }
          `)}
          initDelay={2} // delay before the first transition (if left at 0the first image will be skipped initially)
          transition={4} // transition duration between images
          duration={8} // how long an image is shown
          // specify images to include (and their orderaccording to `relativePath`
          images={["dog.jpg", "cat.jpg", "giraffe.jpg", "tasmanian devil.jpg", "gabe.jpg"]} 
     
          // pass down standard element props
          style={{
            transform: "rotate(-2deg) scale(.9)",
          }}           
        > 
          {/* 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 href="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: `${__dirname}/src/bg`, // wherever background images are stored
        },
      }
    ]

    License

    MIT © GabeEddyT

    Install

    npm i gatsby-image-background-slider

    DownloadsWeekly Downloads

    122

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    49.9 kB

    Total Files

    7

    Last publish

    Collaborators

    • gabeeddyt