How to Customize Gatsby React Owl Carousel?

Step 1.

Run the below command.

npm i react-owl-carousel3 --force

Step 2.

Create a component and add the below code.

import * as React from "react"
import { Link } from "gatsby"

import slideImg1 from "https://images.unsplash.com/photo-1535083988052-565ca9546643?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80"

import slideImg2 from "https://images.unsplash.com/photo-1591871987673-f1513e38493b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=692&q=80"

import slideImg3 from "https://images.unsplash.com/photo-1591872203534-278fc084969e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80"

import Loadable from '@loadable/component'
const OwlCarousel = Loadable(() => import('react-owl-carousel3'))

const options = {
    loop: true,
    nav: true,
    items: 1,
    dots: true,
    autoplayHoverPause: true,
    autoplay: true,
}

const Slider = () => {

    const [display, setDisplay] = React.useState(false);

    React.useEffect(() => {
        setDisplay(true);
    }, [])

    return (
        <>
            {display ? <OwlCarousel 
                className="article-image-slides owl-carousel owl-theme"
                {...options}
            > 
                <div className="item">
                    <img src={slideImg1} alt="image" />
                </div>

                <div className="item">
                    <img src={slideImg2} alt="image" />
                </div>

                <div className="item">
                    <img src={slideImg3} alt="image" />
                </div>
            </OwlCarousel> : ''}
        </>
    );
}

export default Slider;