从小到大的猫头鹰-旋转木马中心模式

Posted 2023-05-07

【中文标题】从小到大的猫头鹰-旋转木马中心模式

【英文标题】：From small to big owl-carousel center mode

【发布时间】：2019-01-03 08:24:43

【问题描述】：

我的目标是制作一个如下所示的轮播：

从小到大。

如果您不知道自己在看什么，这里有 5 张图片/项目，但只有中间的一张以全尺寸显示。靠近中心的图像更小，而外面的图像更小。

但实际上用于实现这一点的 owl carousel 类（medium、big）已被弃用。

我想知道这是否可以在我的 owl-carousel 中制作类似的东西？

这是我在jsfiddle中所做的链接

请在我的小提琴中进行更改。

反对者请先发表评论

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

我试过了！！！

我尝试在第一个 carousel(carousel_1) 配置结束时添加这部分代码

在那里我尝试选择第一个和最后一个项目并给他们类名，在这个类名中我将更改它们width 或height。

但是这个解决方案只需要第一个和最后一个项目，我需要从左右到中心的所有项目

在这个解决方案中也没有像那样写

if(index == 1) 任何 index 都可能不是第一名。这是向一个元素添加两个类。

checkClasses();
$(".carousel_2").on('translated.owl.carousel', function(event) 
    checkClasses();
);

function checkClasses()
    var total = $('.carousel_2 .owl-stage .owl-item.active').length;

    $('.carousel_2 .owl-stage .owl-item').removeClass('firstActiveItem lastActiveItem');

    $('.carousel_2 .owl-stage .owl-item.active').each(function(index)

        if (index === 0) 
            // this is the first one
        $(this).addClass('firstActiveItem');
        
        if (index === total - 1 && total>1) 
            // this is the last one
            $(this).addClass('firstActiveItem');
        

    );

【问题讨论】：

我使用 owl-carousal 已经有 5 个多月了，我从来没有在 owl-carousal 中看到过这样的事情。但我找到了一个你真正想要的演示。 wowslider.com/js-image-slider-premium-page-demo.html去carousal标签查看。这可能会对您有所帮助

@Ramesh ty 寻求帮助，但 owl carousel 也有这个方法的链接，你给了我在 img 中看不到我粘贴的任何东西

在链接中，您可以在滑块下方添加一些蓝色按钮。在那里找到选项 carousal 并单击它。在那里你会找到你想要的。它实际上并不是你想要的，但你可以通过一些配置来实现它。谢谢你让我知道 owl-carousal 可以做到这一点

【参考方案1】：

您的 CSS 中的一段代码将适用，

.owl-carousel .owl-stage 
    max-height: 200px;
    display: flex;
    align-items: center;

.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 imgheight:100%

Fiddle

更新 7 和/或 n 数字项目，css 将不起作用，但您可以使用 jQuery 代码，

$('.h-150px').removeClass('h-150px');
$('.h-200px').removeClass('h-200px');
// add class to just next/prev active element
current.next('.active').addClass('h-150px').end().prev('.active').addClass('h-150px');
// add class to just second next/prev active element
current.next('.active').next('.active').addClass('h-110px').end()
      .end().prev('.active').prev('.active').addClass('h-110px');

Updated Fiddle