From small to big.
Here is the code of Big to Small slider
Linked Owl with Current
owl carousel slider example of big to small slider or center image big slider example using HTML, CSS
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="owl-carousel owl-theme carousel_1"> <img class="item" data-dots="1" src="http://placehold.it/350x250&text=1" alt=""> <img class="item" data-dots="1" src="http://placehold.it/350x250&text=2" alt=""> <img class="item" data-dots="1" src="http://placehold.it/350x250&text=3" alt=""> <img class="item" data-dots="1" src="http://placehold.it/350x250&text=4" alt=""> <img class="item" data-dots="1" src="http://placehold.it/350x250&text=5" alt=""> </div> <div class="owl-carousel owl-theme carousel_2"> <img class="item" data-dots="1" src="http://placehold.it/350x250&text=1" alt=""> <img class="item" data-dots="1" src="http://placehold.it/350x250&text=2" alt=""> <img class="item" data-dots="1" src="http://placehold.it/350x250&text=3" alt=""> <img class="item" data-dots="1" src="http://placehold.it/350x250&text=4" alt=""> <img class="item" data-dots="1" src="http://placehold.it/350x250&text=5" alt=""> </div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.owl-carousel { margin:10px auto; width:400px; max-width:95%; } .owl-carousel .owl-stage { max-height: 200px; display: flex; align-items: center; }.carousel_2 .current { border:2px solid #639; box-sizing:border-box } .carousel_2 .current img { transform-style:flat!important } .carousel_2 .active.center + .active,.carousel_2 .active:first-child,.carousel_2 :not(.active) + .active{ height:150px; } .carousel_2 .active.center{ height:200px; } .owl-carousel .owl-item img{height:100%} |
Javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 |
/** * Plugin for linking multiple owl instances * @version 1.0.0 * @author David Deutsch * @license The MIT License (MIT) */ ;(function($, window, document, undefined) { /** * Creates the Linked plugin. * @class The Linked Plugin * @param {Owl} carousel - The Owl Carousel */ var Linked = function(carousel) { /** * Reference to the core. * @protected * @type {Owl} */ this._core = carousel; /** * All event handlers. * @protected * @type {Object} */ this._handlers = { 'dragged.owl.carousel changed.owl.carousel': $.proxy(function(e) { if (e.namespace && this._core.settings.linked) { this.update(e); } }, this), 'linked.to.owl.carousel': $.proxy(function(e, index, speed, standard, propagate) { if (e.namespace && this._core.settings.linked) { this.toSlide(index, speed, propagate); } }, this) }; // register event handlers this._core.$element.on(this._handlers); // set default options this._core.options = $.extend({}, Linked.Defaults, this._core.options); }; /** * Default options. * @public */ Linked.Defaults = { linked: false }; /** * Updated linked instances */ Linked.prototype.update = function(e) { this.toSlide( e.relatedTarget.relative(e.item.index) ); }; /** * Carry out the to.owl.carousel proxy function * @param {int} index * @param {int} speed * @param {bool} propagate */ Linked.prototype.toSlide = function(index, speed, propagate) { var id = this._core.$element.attr('id'), linked = typeof(this._core.settings.linked) === 'string' ? this._core.settings.linked.split(',') : this._core.settings.linked; if ( typeof propagate == 'undefined' ) { propagate = true; } index = index || 0; if ( propagate ) { $.each(linked, function(i, el){ $(el).trigger('linked.to.owl.carousel', [index, 300, true, false]); }); } else { this._core.$element.trigger('to.owl.carousel', [index, 300, true]); if ( this._core.settings.current ) { this._core._plugins.current.switchTo(index); } } }; /** * Destroys the plugin. * @protected */ Linked.prototype.destroy = function() { var handler, property; for (handler in this._handlers) { this.$element.off(handler, this._handlers[handler]); } for (property in Object.getOwnPropertyNames(this)) { typeof this[property] != 'function' && (this[property] = null); } }; $.fn.owlCarousel.Constructor.Plugins.linked = Linked; })(window.Zepto || window.jQuery, window, document); $(".carousel_1").owlCarousel({ nav: false, items: 1, margin:1, linked: ".carousel_2" }); var sync2 = $(".carousel_2"); $(sync2).owlCarousel({ nav: true, loop:true, items: 4, margin:10, center:true, linked: sync2.prev() }).on('initialized.owl.carousel linked.to.owl.carousel', function() { sync2.find('.owl-item.current').removeClass('current'); var current = sync2.find('.owl-item.active.center').length ? sync2.find('.owl-item.active.center') : sync2.find('.owl-item.active').eq(0); current.addClass('current'); }); |