title: Owl carousel hide second item while sliding to third item
body: <p>I have used <code>URLhashListener</code> event to create horizontal page sliding.</p>
  
  <p>Slide should be scroll direct to <strong>Page 3</strong>, when we click on <strong>Page 3</strong> button from <strong>Page 1</strong>. Now it is sliding over through Page 2. </p>
  
  <p>How can I hide the second page when I go to <strong>Page 3</strong> from <strong>Page 1</strong>.</p>
  
  <p>See my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.owl-carousel').owlCarousel({
    items: 1,
    autoplay: false,
    loop: false,
    nav: false,
    dots: false,
    center: true,
    mouseDrag: false,
    touchDrag: false,
    autoHeight: true,
    margin: 10,
    smartSpeed: 500,
    URLhashListener: true,
    autoplayHoverPause: true,
    startPosition: 'URLHash'
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.owl-carousel {
    position: relative;
  }
  
  .page {
    height: 10rem;
    padding: 1rem;
    height: 200px;
  }
  
  .one {
    background: #bec4bd;
  }
  
  .two {
    background: green;
  }
  
  .three {
    background: #41253c;
  }
  
  .linkA {
    position: absolute;
    bottom: 10px;
    left: 10px;
    text-decoration: none;
    background: red;
    color: #fff;
    padding: 5px 15px;
    margin-right: 5px;
    font-family: sans-serif;
    font-size: 14px;
  }
  
  .linkB {
    position: absolute;
    bottom: 10px;
    right: 10px;
    text-decoration: none;
    background: red;
    color: #fff;
    padding: 5px 15px;
    margin-right: 5px;
    font-family: sans-serif;
    font-size: 14px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet" /&gt;
  &lt;link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"&gt;&lt;/script&gt;
  &lt;div class="owl-carousel owl-theme"&gt;
    &lt;div class="page one" data-hash="page1"&gt;
      Button at the bottom!
      &lt;a href="#page2" class="linkA"&gt;Page 2&lt;/a&gt;
      &lt;a href="#page3" class="linkB"&gt;Page 3&lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div class="page two" data-hash="page2"&gt;
      Button at the bottom!
      &lt;a href="#page1" class="linkA"&gt;Page 1&lt;/a&gt;
      &lt;a href="#page3" class="linkB"&gt;Page 3&lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div class="page three" data-hash="page3" style="color:#fff;"&gt;
      Button at the bottom!
      &lt;a href="#page2" class="linkA"&gt;Page 2&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>