title: How to responsive owl carousel in react js
body: <p>I want to show only one item in mobile view. but it shows 4 item which i show in desktop view,
  please help me out.</p>
  
  <p>Here's my code:-</p>
  
  <pre><code>    &lt;div className="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"&gt;
        &lt;OwlCarousel className="owl-theme hotel-slider tab-slide" id="tab-slider" loop margin={10} items={4} nav&gt;
          {Data.shimladetail.map((shimlatour, i) =&gt; (
  
          &lt;div className="item no-brdr"&gt;
            &lt;img src={shimlatour.alltourimg} className="tour-img" /&gt;
            &lt;div className="tour-cntnt"&gt;
              &lt;h5 className="tours-heading"&gt;{shimlatour.alltourtitle}&lt;/h5&gt;
              &lt;p className="tour-pera"&gt;{shimlatour.alltourdiscription}&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          ))}
        &lt;/OwlCarousel&gt;
      &lt;/div&gt;
  </code></pre>