How Use React-Owl-Carousel3 In Gatsby Project?

In this article, I will show you how to use react-owl-carousel3 in the Gatsby project.

Here is a simple way how to use it in your Gatsby project.

Step-1:  Install

npm I react-owl-carousel3

Step-2:  Usage

import React from 'react';
import OwlCarousel from 'react-owl-carousel';
const Banner = () => {
    return (
        <div className="banner-slider-area">
            <OwlCarousel
                className="banner-slider owl-theme"
                loop={true}
                margin={10}
                dots={true}
                items={1}
                autoplay={true}
            >
                <div className="banner-item item-bg1">
                    <div className="d-table">
                        <div className="d-table-cell">
                            <div className="container">
                                <div className="banner-item-content">
                                    <span>Only High Quality Services</span>
                                    <h1>Excellent IT Services for Your Success</h1>
                                    <p>Aenean Sollicitudin, Lorem quis Bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet </p>
                                    <div className="banner-btn">
                                        <Link to="/about" className="default-btn btn-bg-two border-radius-50">Learn More <i className='bx bx-chevron-right'></i></Link>
                                        <Link to="/contact" className="default-btn btn-bg-one border-radius-50 ml-20">Get A Quote <i className='bx bx-chevron-right'></i></Link>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="banner-item item-bg2">
                    <div className="d-table">
                        <div className="d-table-cell">
                            <div className="container">
                                <div className="banner-item-content">
                                    <span>Only High Quality Services</span>
                                    <h1>We Provide Best IT Services for Your Need</h1>
                                    <p> Aenean Sollicitudin, Lorem quis Bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet</p>
                                    <div className="banner-btn">
                                        <Link to="/about" className="default-btn btn-bg-two border-radius-50">Learn More <i className='bx bx-chevron-right'></i></Link>
                                        <Link to="/contact" className="default-btn btn-bg-one border-radius-50 ml-20">Get A Quote <i className='bx bx-chevron-right'></i> </Link></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="banner-item item-bg3">
                    <div className="d-table">
                        <div className="d-table-cell">
                            <div className="container">
                                <div className="banner-item-content">
                                    <span>Only High Quality Services</span>
                                    <h1>Digital IT Service With Excellent Quality</h1>
                                    <p>Aenean Sollicitudin, Lorem quis Bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet</p>
                                    <div className="banner-btn">
                                        <Link to="/about" className="default-btn btn-bg-two border-radius-50">Learn More <i className='bx bx-chevron-right'></i></Link>
                                        <Link to="/contact" className="default-btn btn-bg-one border-radius-50 ml-20">Get A Quote <i className='bx bx-chevron-right'></i> </Link>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </OwlCarousel>
        </div>
    )
}
export default Banner

 

That’s all. If you have any queries, then let me know in the comment section.