import dynamic from "next/dynamic";
import React from "react";
const OwlCarousel = dynamic(() => import("react-owl-carousel"), {
  ssr: false
});
const Banner = () => {
  const projects = {
    responsive: {
      0: {
        items: 1,
        nav: false
      },
      450: {
        items: 1
      },
      600: {
        items: 1
      },
      1000: {
        items: 1
      }
    }
  };
  return (
    <>
      <section className="home-banner">
        <div>
          <OwlCarousel
            className="owl-theme owl-custom01"
            margin={50}
            items={5}
            dots={false}
            nav={true}
            responsive={projects.responsive}
            autoplay={true}
            autoplayTimeout={5000}
            center={false}
            loop={false}
            touchDrag={true}
          >
            <div className="item">
              <div className="slider-item slider-item-01">
                <div className="d-table">
                  <div className="d-table-cell">
                    <div className="container">
                        <div className="row">
                            <div className="col-md-6">
                            <div className="slider-text">
                                <div className="banner-title">
                                <div className="banner-txt">
                                    <h1>Lorem ipsum dolor sit amet</h1>
                                    <div className="title">WELCOME TO THE WORLD OF TRAVEL</div>
                                    <div className="disc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</div>
                                </div>
                                </div>
                                <div className="common-btn">
                                    <a className="btn btn-primary" href="/allergic-rhinitis">
                                        Explore Now
                                    </a>
                                </div>
                            </div>
                            </div>
                        </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="item">
              <div className="slider-item slider-item-02">
                <div className="d-table">
                  <div className="d-table-cell">
                    <div className="container">
                        <div className="row">
                            <div className="col-md-6">
                            <div className="slider-text">
                                <div className="banner-title">
                                <div className="banner-txt">
                                    <h1>Lorem ipsum dolor sit amet</h1>
                                    <div className="title">WELCOME TO THE WORLD OF TRAVEL</div>
                                    <div className="disc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</div>
                                </div>
                                </div>
                                <div className="common-btn">
                                    <a className="btn btn-primary" href="/allergic-rhinitis">
                                        Explore Now
                                    </a>
                                </div>
                            </div>
                            </div>
                        </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="item">
              <div className="slider-item slider-item-03">
                <div className="d-table">
                  <div className="d-table-cell">
                    <div className="container">
                        <div className="row">
                            <div className="col-md-6">
                            <div className="slider-text">
                                <div className="banner-title">
                                <div className="banner-txt">
                                    <h1>Lorem ipsum dolor sit amet</h1>
                                    <div className="title">WELCOME TO THE WORLD OF TRAVEL</div>
                                    <div className="disc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</div>
                                </div>
                                </div>
                                <div className="common-btn">
                                    <a className="btn btn-primary" href="/allergic-rhinitis">
                                        Explore Now
                                    </a>
                                </div>
                            </div>
                            </div>
                        </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="item">
              <div className="slider-item slider-item-04">
                <div className="d-table">
                  <div className="d-table-cell">
                    <div className="container">
                        <div className="row">
                            <div className="col-md-6">
                            <div className="slider-text">
                                <div className="banner-title">
                                <div className="banner-txt">
                                    <h1>Lorem ipsum dolor sit amet</h1>
                                    <div className="title">WELCOME TO THE WORLD OF TRAVEL</div>
                                    <div className="disc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</div>
                                </div>
                                </div>
                                <div className="common-btn">
                                    <a className="btn btn-primary" href="/allergic-rhinitis">
                                        Explore Now
                                    </a>
                                </div>
                            </div>
                            </div>
                        </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </OwlCarousel>
        </div>
      </section>
    </>
  );
};

export default Banner;