From small to big owl-carousel center mode slider in HTML

By tutspointer Last updated Oct 19, 2020

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

<div class="owl-carousel owl-theme carousel_1">
	    <img class="item" data-dots="1" src="https://placehold.it/350x250&text=1" alt="">
	    <img class="item" data-dots="1" src="https://placehold.it/350x250&text=2" alt="">
	    <img class="item" data-dots="1" src="https://placehold.it/350x250&text=3" alt="">
	    <img class="item" data-dots="1" src="https://placehold.it/350x250&text=4" alt="">
	    <img class="item" data-dots="1" src="https://placehold.it/350x250&text=5" alt="">
	</div>
  <div class="owl-carousel owl-theme carousel_2">
	    <img class="item" data-dots="1" src="https://placehold.it/350x250&text=1" alt="">
	    <img class="item" data-dots="1" src="https://placehold.it/350x250&text=2" alt="">
	    <img class="item" data-dots="1" src="https://placehold.it/350x250&text=3" alt="">
	    <img class="item" data-dots="1" src="https://placehold.it/350x250&text=4" alt="">
	    <img class="item" data-dots="1" src="https://placehold.it/350x250&text=5" alt="">
	</div>

</div>

</div>

CSS

.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%}

.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

/**
 * 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');
    
});

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');

});