CODEWITHSUNDEEP
jqueryhtmlslidercarousel
ShibinRagh
ShibinRagh

Reputation: 6646

owl-carousel-autoWidth, Avoid blank space in visible area when last item visible

my code

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

note: 1) loop false (I dont need loop items )

2) items - I dont know how to manage show items number ( carousel implementing on fluid responsive website )

my target Next button should hide when last item visible (I need items always fit in the visible area)

myfiddle

Upvotes: 2

Views: 12304

Answers (3)

Marcelo Austria
Marcelo Austria

Reputation: 951

owl carousel 2.3.4 have not fixed this bug.

But this code can work.

Just Insert between line:1215 and line:1216 in owl.carousel.js-2.3.4

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

Upvotes: 0

Carol McKay
Carol McKay

Reputation: 2424

What worked for me, I worked this out by trial and error then win!

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;
        }
    }
}

Upvotes: 1

Cerlin
Cerlin

Reputation: 6722

Check this 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();
})

I have attached two functions to two events (onInitialized and changed.owl.carousel).

the function inside onInitialized will hide the prev button onload(this can also be achieved by css.) the function inside changed.owl.carousel will hide/show both prev and next on respective conditions.

For more docs on event, refer this

Upvotes: 4

Related Questions