Question

我的代码

$('.owl-carousel').owlCarousel({
    margin:10,
    loop:false,
    autoWidth:true,
    nav:true,
    items:1,
})

注意： 1）循环 false（我不需要循环项目）

2）项目 - 我不知道如何管理展示品编号（在流体响应网站上实施旋转木马）

我的目标下一个按钮应隐藏在最后一个项目可见时（我需要项目始终适合可见区域）

myfiddle

Answer 1

选中此fiddle

var owl = $('.owl-carousel').owlCarousel({
    margin:10,
    loop:false,
    autoWidth:true,
    nav:true,
    items:1,
    onInitialized : function(){
        if($('.owl-item').first().hasClass('active'))
            $('.owl-prev').hide();
        else
            $('.owl-prev').show();
        }
    })
owl.on('changed.owl.carousel',function(e){
    if(e.item.index == 0)
        $('.owl-prev').hide();
    else
        $('.owl-prev').show();
    if(e.page.count == (e.page.index + 1))
        $('.owl-next').hide();
    else
        $('.owl-next').show();
})

我已将两个功能附加到两个事件（onInitialized和changed.owl.carousel）。

onInitialized内的功能会隐藏上一页按钮onload（这也可以通过css实现）。changed.owl.carousel内的功能会隐藏/显示prev和next各自的条件。

有关活动的更多文档，请参阅this

Answer 2

什么对我有用，我通过反复试验解决了这个问题，然后赢了！

php：

<script>
    jQuery("#name-your-slider").owlCarousel({
        loop: true,
        nav: true,
        dots: false,
        autoWidth: true,
        mergeFit: true,
        center: true,
        margin: 5,
        responsive: {
            0: {
                items: 1
            },
            768: {
                items: 2
            },
            1024: {
                // autoWidth: true,
                items: 3
            }
        }
    });
    </script>

scss：

#name-your-slider 
{
    .owl-stage
    {
        display: flex;
        justify-content: flex-start;

        .owl-item
        {
            /* 775px is the flex basis because it is the widest slide size
               don't let it grow (there are no wider slides) do let it shrink
               because there are thinner slides */
            flex: 0 1 775px;
        }
    }
}

Answer 3

owl carousel 2.3.4 尚未修复此错误。

但是这段代码可以工作。

在 owl.carousel.js-2.3.4 中的 line:1215 和 line:1216 之间插入

// Custom change : #1 Fixed the last item space to the right when set autoWith with true;
// Custom change : #1 Re-fixed last item space to right when all items width small than the container width;
// Custom change : #4 Fixed items scrolled left even when items width small than container width;
var settings = this.settings,
        iterator = this._items.length,
        itemsWidthSum = this._items[--iterator].width(),
        elementWidth = this.$element.width(),
        accommodate = true;

while (iterator--) {
    itemsWidthSum += this._items[iterator].width() + this.settings.margin;
    if (itemsWidthSum > elementWidth) {
        accommodate = false;
        break;
    }
}

if (accommodate)
{
    // Custom change : #4 Fixed if items width small than container width, reset coordinate with 0;
    coordinate = 0;
}
else
{
    // Custom change : #3 Fixed with the case of iterator(this._items.length) == 0;
    if ((settings.autoWidth || settings.merge)
            && !settings.loop
            && iterator > 0 && position > 0
            && position > iterator) {
        var tempPosition = position,
                reciprocalItemsWidth = 0;
        while (tempPosition < this._items.length) {
            reciprocalItemsWidth += this._items[tempPosition++].width() + this.settings.margin;
        }
        var direction = settings.rtl ? -1 : 1;
        coordinate = coordinate + direction * (elementWidth - reciprocalItemsWidth + this.settings.margin);
    }
}

owl-carousel-autoWidth，当最后一项可见时，避免可见区域中的空白区域

3 个答案: