title: Owl Carousel + URL + Slide Item Change
body: <p>There are 3 things I would like to do in javascript/jQuery. </p>
  
  <ol>
  <li><p>Create a URL for each item (I am currently using location.hash)</p></li>
  <li><p>Change the current item based off the URL provided (I am currently taking the location.hash and accessing the slide number) </p></li>
  <li><p>Ensure both thumbnail/slide change accordingly to the URL</p></li>
  </ol>
  
  <p>I am encountering a few issues, which I believe I can fix. However, I am not sure I am going about this in the most logical/efficient way. Here is my current function:</p>
  
  <pre><code>function slideUrl(el) {
    var current = this.currentItem;
    var slide = location.hash;
    if(location.hash === '') {
      location.hash = 'slide' + current;
    } else {
      var goToSlide = slide.replace("#slide",""); 
      sync1.trigger("owl.jumpTo", goToSlide);
  
      el.find(".owl-item").eq(goToSlide).addClass("synced");
      sync2.trigger("owl.jumpTo", goToSlide);
  
      this.currentItem = goToSlide;
      console.log(this.currentItem);         
    }
  }
  </code></pre>
  
  <p>The issues I have run into include: </p>
  
  <p>The current item doesn't change so if I go to the provided URL(say slide 9) and click next, the slide goes to 1 vs. 10 - since it thinks its on slide 0. </p>
  
  <p>I'm not exactly sure if this is an issue, but I believe I have to refresh twice if I change the url - /demos/sync.html#slide2 to /demos/sync.html#slide3.</p>
  
  <p>Any assistance/better idea to go about this, would be really helpful! </p>