How To Customize The React Owl Carousel?

Customize the React JS Owl Carousel simple way and make your website beautiful.

Step 1 Install the package

npm install react-owl-carousel3

Step 2 then create the component

import React from 'react';
import OwlCarousel from 'react-owl-carousel3';

const options = {
    items:1,
    nav: false,
    loop: true,
};

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

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

    return (      
        <div>
            {display ? <OwlCarousel 
                className="owl-carousel owl-theme"
                {...options}
            > 
                <div className="item">
                    <img src="https://images.unsplash.com/photo-1504384764586-bb4cdc1707b0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=870&q=80" alt="Img"/>
                </div>
                <div className="item">
                    <img src="https://images.unsplash.com/photo-1504384764586-bb4cdc1707b0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=870&q=80" alt="Img"/>
                </div>
                <div className="item">
                    <img src="https://images.unsplash.com/photo-1504384764586-bb4cdc1707b0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=870&q=80" alt="Img"/>
                </div>
            </OwlCarousel> : ''}
        </div>
    )
}

export default SimpleSlider;

More Info: https://www.npmjs.com/package/react-owl-carousel3

If you have any queries, please let me know in the comments section.

Till then!

Happy Coding!