Shopping cart is empty.

Owl Status Information

Name Value
owlItems.length
currentItem
prevItem
visibleItems
dragDirection:

Setup

This is an example of retrieving this.owl object with basic information.

$(document).ready(function() {

  var owl = $("#owl-demo"),
      status = $("#owlStatus");

  owl.owlCarousel({
    navigation : true,
    afterAction : afterAction
  });

  function updateResult(pos,value){
    status.find(pos).find(".result").text(value);
  }

  function afterAction(){
    updateResult(".owlItems", this.owl.owlItems.length);
    updateResult(".currentItem", this.owl.currentItem);
    updateResult(".prevItem", this.prevItem);
    updateResult(".visibleItems", this.owl.visibleItems);
    updateResult(".dragDirection", this.owl.dragDirection);
  }

  /*
  All owl object information listed below:

  base.owl = {
    "userOptions" : base.userOptions,
    "baseElement" : base.$elem,   
    "userItems"   : base.$userItems,
    "owlItems"    : base.$owlItems,
    "currentItem" : base.currentItem,
    "prevItem"    : base.prevItem,
    "visibleItems": base.visibleItems,
    "isTouch"     : base.browser.isTouch,
    "browser"     : base.browser,
    "dragDirection": base.dragDirection
  }
  */


  
});
<div id="owl-demo" class="owl-carousel">
  <div class="item"><h1>0</h1></div>
  <div class="item"><h1>1</h1></div>
  <div class="item"><h1>2</h1></div>
  <div class="item"><h1>3</h1></div>
  <div class="item"><h1>4</h1></div>
  <div class="item"><h1>5</h1></div>
  <div class="item"><h1>6</h1></div>
  <div class="item"><h1>7</h1></div>
  <div class="item"><h1>8</h1></div>
  <div class="item"><h1>9</h1></div>
  <div class="item"><h1>10</h1></div>
  <div class="item"><h1>11</h1></div>
  <div class="item"><h1>12</h1></div>
  <div class="item"><h1>13</h1></div>
  <div class="item"><h1>14</h1></div>
  <div class="item"><h1>15</h1></div>
</div>
<table id="owlStatus" class="table" style="width:auto">
  <thead>
    <tr>
      <th>Name</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>

    <tr class="owlItems">
      <td>owlItems.length</td>
      <td class="result"></td>
    </tr>

    <tr class="currentItem">
      <td>currentItem</td>
      <td class="result"></td>
    </tr>

    <tr class="prevItem">
      <td>prevItem</td>
      <td class="result"></td>
    </tr>

    <tr class="visibleItems">
      <td>visibleItems</td>
      <td class="result"></td>
    </tr>

     <tr class="dragDirection">
      <td>dragDirection:</td>
      <td class="result"></td>
    </tr>
  </tbody>
</table>

#owl-demo .item{
  background: #3fbf79;
  padding: 30px 0px;
  margin: 10px;
  color: #FFF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
}

Contact Us

We look forward to hearing from you

Ph: (Australia) 02 9818 4200
Glade View, 446 Victoria Rd (Cnr Tennyson Road), Gladesville NSW 2111 AUSTRALIA