background-slider.jsx

import React, { Component, useState, useEffect, useRef } from "react"

import BackgroundImage from "gatsby-background-image"
import style from "./index.module.css"

// props: data.allFile.edges[].node.childImageSharp.fluid
class BackgroundSliderMain extends Component {
    state = {
        current: 0,
        edgeIndex: 0,
        imageList: [],
    }

    componentDidMount() {
        const list = []
        for (let i = 0; i < 2; i++) {
            if (!this.props.data.allFile.edges[i]) {
                continue
            }

            list.push({
                ...this.props.data.allFile.edges[i],
            })
        }

        list.unshift(
            this.props.data.allFile.edges[
                this.props.data.allFile.edges.length - 1
            ]
        )

        this.setState({ imageList: list, edgeIndex: 3 })
    }

    _next = () => {
        if (this.state.current < this.state.imageList.length - 1) {
            this.setState({ current: this.state.current + 1 })
        }

        if (this.state.edgeIndex < this.props.data.allFile.edges.length - 1) {
            const nextList = [
                ...this.state.imageList,
                this.props.data.allFile.edges[this.state.edgeIndex + 1],
            ]

            nextList.shift()

            this.setState({
                imageList: nextList,
                edgeIndex: this.state.edgeIndex + 1,
            })
        }
    }

    _keyMaker = inx => `slide-${inx}`

    render() {
        return (
            <div className={`${style.background_slider}`} onClick={this._next}>
                {this.state.imageList.map(({ node }, inx) => {
                    const key = this._keyMaker(inx)
                    return (
                        <Slide
                            key={key}
                            imageData={node}
                            current={inx === this.state.current}
                        >
                            <div>
                                current: {this.state.current} <br />
                                img length: {this.state.imageList.length - 1}
                                <br />
                            </div>
                        </Slide>
                    )
                })}
            </div>
        )
    }
}

const Slide = ({ onLoad, imageData, current, children }) => {
    return (
        <div className={`${current ? style.current : style.slide}`}>
            <BackgroundImage
                Tag={`div`}
                className={style.background_image}
                fluid={imageData.childImageSharp.fluid}
                onLoad={onLoad}
                durationFadeIn={300}
                fadeIn={false}
                loading={"eager"}
                backgroundColor={imageData.colors.muted}
                preserveStackingContext={true}
            >
                <div className={style.background_tint} />
                {children}
            </BackgroundImage>
        </div>
    )
}

export default BackgroundSliderMain

index.module.css

.background_slider {
    background: black;
    position: fixed !important;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -2;
}

.current {
    & > .background_image {
        z-index: -1 !important;
        /* opacity: 1 !important; */
        /* animation-name: fadeInOpacity; */
        /* animation-iteration-count: 1; */
        /* animation-timing-function: ease-in; */
        /* animation-duration: 1500ms; */
    }
}

.slide {
    & > .background_image {
        z-index: -2!important;
    }
    /* display: none; */
}

.background_image {
    position: fixed !important;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;

    .background_tint {
        display: block;
        content: "";
        background-color: rgba(0, 0, 0, 0.4);
        position: fixed;
        top: 0;
        z-index: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    & > * {
        font-size: 1.1em;
        z-index: 2;
        position: absolute;
        left: 0.8em;
        bottom: 0.5em;
        color: white;
        margin: 0;
        user-select: none;
    }
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}