title: owl-carousel slider on drag and dot click not working
body: <p>I'm using Two owl carousel sliders with one navigation for my bootstrap website. In the below code prev and next is working perfectly. </p>
  
  <p>The problem that the <code>ondrag</code> and <code>owl-dots</code> functions are not working. When I click the dot and drag the first slider (<code>work-class1</code>) the second slider should slide same like prev and next arrow.</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>var o2 = $('#work-class2')
  o2.owlCarousel({
    items: 2,
    singleItem: true,
    loop: false,
    margin: 10,
    dots: false,
    pagination: false,
    nav: false,
    touchDrag: true,
    slideBy: 2,
    mouseDrag: false
  });
  
  var o1 = $('#work-class1');
  o1.owlCarousel({
    items: 1,
    singleItem: true,
    loop: false,
    margin: 0,
    //dots:false,
    pagination: false,
    nav: true,
    touchDrag: true,
    slideBy: 1,
    mouseDrag: true
  });
  
  var o1 = $('#work-class1'),
    o2 = $('#work-class2');
    
  //Sync o2 by o1
  o1.on('click onDragged', '.owl-next', function() {
    o2.trigger('next.owl.carousel')
  });
  
  o1.on('click dragged.owl.carousel', '.owl-prev', function() {
    o2.trigger('prev.owl.carousel')
  });
  
  //Sync o1 by o2
  o2.on('click onDragged', '.owl-next', function() {
    o1.trigger('next.owl.carousel')
  });
  
  o2.on('click dragged.owl.carousel', '.owl-prev', function() {
    o1.trigger('prev.owl.carousel')
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.owl-carousel .owl-nav button.owl-next span,
  .owl-carousel .owl-nav button.owl-prev span,
  .owl-carousel button.owl-dot {
    font-size: 40px;
    margin: 0 10px;
  }
  
  .owl-dot span {
    display: block;
    height: 15px;
    width: 15px;
    background: #f00;
    border-radius: 30px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.1/assets/owl.carousel.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.1/owl.carousel.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="container mt-5"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-4"&gt;
        &lt;div class="owl-carousel work-class1" id="work-class1"&gt;
          &lt;img src="http://i.imgur.com/RGGxODF.jpg" class="img-fluid" alt="..."&gt;
          &lt;img src="http://www.idaconcpts.com/wp-content/testing-website-optimization.png" class="img-fluid" alt="..."&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-8"&gt;
        &lt;div class="owl-carousel work-class2" id="work-class2"&gt;
          &lt;img src="http://i.imgur.com/RGGxODF.jpg" class="img-fluid" alt="..."&gt;
          &lt;img src="http://i.imgur.com/RGGxODF.jpg" class="img-fluid" alt="..."&gt;
          &lt;img src="http://www.idaconcpts.com/wp-content/testing-website-optimization.png" class="img-fluid" alt="..."&gt;
          &lt;img src="http://i.imgur.com/RGGxODF.jpg" class="img-fluid" alt="..."&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>