Owl Status Information

Name Value
owlItems.length 16
currentItem 0
prevItem 0
visibleItems 0,1,2,3,4
dragDirection:

Setup

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

  1. $(document).ready(function() {
  2.  
  3. var owl = $("#owl-demo"),
  4. status = $("#owlStatus");
  5.  
  6. owl.owlCarousel({
  7. navigation : true,
  8. afterAction : afterAction
  9. });
  10.  
  11. function updateResult(pos,value){
  12. status.find(pos).find(".result").text(value);
  13. }
  14.  
  15. function afterAction(){
  16. updateResult(".owlItems", this.owl.owlItems.length);
  17. updateResult(".currentItem", this.owl.currentItem);
  18. updateResult(".prevItem", this.prevItem);
  19. updateResult(".visibleItems", this.owl.visibleItems);
  20. updateResult(".dragDirection", this.owl.dragDirection);
  21. }
  22.  
  23. /*
  24. All owl object information listed below:
  25.  
  26. base.owl = {
  27. "userOptions" : base.userOptions,
  28. "baseElement" : base.$elem,
  29. "userItems" : base.$userItems,
  30. "owlItems" : base.$owlItems,
  31. "currentItem" : base.currentItem,
  32. "prevItem" : base.prevItem,
  33. "visibleItems": base.visibleItems,
  34. "isTouch" : base.browser.isTouch,
  35. "browser" : base.browser,
  36. "dragDirection": base.dragDirection
  37. }
  38. */
  39.  
  40.  
  41. });
  1. <div id="owl-demo" class="owl-carousel">
  2. <div class="item"><h1>0</h1></div>
  3. <div class="item"><h1>1</h1></div>
  4. <div class="item"><h1>2</h1></div>
  5. <div class="item"><h1>3</h1></div>
  6. <div class="item"><h1>4</h1></div>
  7. <div class="item"><h1>5</h1></div>
  8. <div class="item"><h1>6</h1></div>
  9. <div class="item"><h1>7</h1></div>
  10. <div class="item"><h1>8</h1></div>
  11. <div class="item"><h1>9</h1></div>
  12. <div class="item"><h1>10</h1></div>
  13. <div class="item"><h1>11</h1></div>
  14. <div class="item"><h1>12</h1></div>
  15. <div class="item"><h1>13</h1></div>
  16. <div class="item"><h1>14</h1></div>
  17. <div class="item"><h1>15</h1></div>
  18. </div>
  19. <table id="owlStatus" class="table" style="width:auto">
  20. <thead>
  21. <tr>
  22. <th>Name</th>
  23. <th>Value</th>
  24. </tr>
  25. </thead>
  26. <tbody>
  27.  
  28. <tr class="owlItems">
  29. <td>owlItems.length</td>
  30. <td class="result"></td>
  31. </tr>
  32.  
  33. <tr class="currentItem">
  34. <td>currentItem</td>
  35. <td class="result"></td>
  36. </tr>
  37.  
  38. <tr class="prevItem">
  39. <td>prevItem</td>
  40. <td class="result"></td>
  41. </tr>
  42.  
  43. <tr class="visibleItems">
  44. <td>visibleItems</td>
  45. <td class="result"></td>
  46. </tr>
  47.  
  48. <tr class="dragDirection">
  49. <td>dragDirection:</td>
  50. <td class="result"></td>
  51. </tr>
  52. </tbody>
  53. </table>
  54.  
  1. #owl-demo .item{
  2. background: #3fbf79;
  3. padding: 30px 0px;
  4. margin: 10px;
  5. color: #FFF;
  6. -webkit-border-radius: 3px;
  7. -moz-border-radius: 3px;
  8. border-radius: 3px;
  9. text-align: center;
  10. }
  11.  

More Demos