Owl Carousel 2 - Stage Padding and Lazy Loading
If you set 0 as transition speed when triggering to.owl.carousel event, it doesn't work
HTML
<link rel="stylesheet" href="//cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.carousel.css">
<link rel="stylesheet" href="//cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.theme.default.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="num1" class="owl-carousel">
<div class="item">
<img class="owl-lazy" src="http://placehold.it/5x5/000000/000000" data-src="http://placehold.it/200x200&text=1" />
</div>
<div class="item">
<img class="owl-lazy" src="http://placehold.it/5x5/000000/000000" data-src="http://placehold.it/200x200&text=2" />
</div>
<div class="item">
<img class="owl-lazy" src="http://placehold.it/5x5/000000/000000" data-src="http://placehold.it/200x200&text=3" />
</div>
<div class="item">
<img class="owl-lazy" src="http://placehold.it/5x5/000000/000000" data-src="http://placehold.it/200x200&text=4" />
</div>
<div class="item">
<img class="owl-lazy" src="http://placehold.it/5x5/000000/000000" data-src="http://placehold.it/200x200&text=5" />
</div>
<div class="item">
<img class="owl-lazy" src="http://placehold.it/5x5/000000/000000" data-src="http://placehold.it/200x200&text=2" />
</div>
<div class="item">
<img class="owl-lazy" src="http://placehold.it/5x5/000000/000000" data-src="http://placehold.it/200x200&text=3" />
</div>
<div class="item">
<img class="owl-lazy" src="http://placehold.it/5x5/000000/000000" data-src="http://placehold.it/200x200&text=4" />
</div>
<div class="item">
<img class="owl-lazy" src="http://placehold.it/5x5/000000/000000" data-src="http://placehold.it/200x200&text=5" />
</div>
</div>
CSS
BODY {
background-color: white;
padding: 0 40px;
}
.owl-carousel {
}
.item {
background-color: black;
}
JavaScript
/**
* Owl carousel
* @version 2.0.0-beta.3
* @author Bartosz Wojciechowski
* @license The MIT License (MIT)
* @todo Lazy Load Icon
* @todo prevent animationend bubling
* @todo itemsScaleUp
* @todo Test Zepto
* @todo stagePadding calculate wrong active classes
*/
;(function($, window, document, undefined) {
/**
* Creates a carousel.
* @class The Owl Carousel.
* @public
* @param {HTMLElement|jQuery} element - The element to create the carousel for.
* @param {Object} [options] - The options
*/
function Owl(element, options) {
/**
* Current settings for the carousel.
* @public
*/
this.settings = null;
/**
* Current options set by the caller including defaults.
* @public
*/
this.options = $.extend({}, Owl.Defaults, options);
/**
* Plugin element.
* @public
*/
this.$element = $(element);
/**
* Proxied event handlers.
* @protected
*/
this._handlers = {};
/**
* References to the running plugins of this carousel.
* @protected
*/
this._plugins = {};
/**
* Currently suppressed events to prevent them from beeing retriggered.
* @protected
*/
this._supress = {};
/**
* Absolute current position.
* @protected
*/
this._current = null;
/**
* Animation speed in milliseconds.
* @protected
*/
this._speed = null;
/**
* Coordinates of all items in pixel.
* @todo The name of this member is missleading.
* @protected
*/
this._coordinates = [];
/**
* Current breakpoint.
* @todo Real media queries would be nice.
* @protected
*/
this._breakpoint = null;
/**
* Current width of the plugin element.
*/
this._width = null;
/**
* All real items.
* @protected
*/
this._items = [];
/**
* All cloned items.
* @protected
*/
this._clones = [];
/**
* Merge values of all items.
* @todo Maybe this could be part of a plugin.
* @protected
*/
this._mergers = [];
/**
* Widths of all...