Name | Value |
---|---|
owlItems.length | 16 |
currentItem | 0 |
prevItem | 0 |
visibleItems | 0,1,2,3,4 |
dragDirection: |
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;
- }