title: Set active item in owlCarousel
body: <p>I have a owl carousel with 3 items, the carousel displays one item per page.
  Inside each item I have html inputs.</p>
  
  <p>I want to programmatically change the active item so I can make focus on input inside it.</p>
  
  <p>Here is the initial configuration: </p>
  
  <pre><code>var owl = $("#selector").owlCarousel({
      slideSpeed: 300,
      paginationSpeed: 400,
      items: 1,
      itemsDesktop: false,
      itemsDesktopSmall: false,
      itemsTablet: false,
      itemsMobile: false,
      dots: false,
      touchDrag: false,
      mouseDrag: false
  });
  </code></pre>
  
  <p>And the html looks like this:</p>
  
  <pre><code>&lt;div id="selector" class="owl-carousel owl-theme"&gt;
      &lt;div class="item"&gt;
          &lt;input type="text" name="name1" id="input1"&gt;
       &lt;/div&gt;
  
      &lt;div class="item"&gt;
          &lt;input type="text" name="name2" id="input2"&gt;
       &lt;/div&gt;
  
      &lt;div class="item"&gt;
          &lt;input type="text" name="name3" id="input3"&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>For example: if I want to make focus on input3, I have to set the current page to 3 and then set the focus.</p>