Owlcarousel2: owl carousel - not show last item when is rtl and loop is false

Created on 5 May 2018  ·  8Comments  ·  Source: OwlCarousel2/OwlCarousel2

Hi,
I have 2 problem when use owl carousel2 on mobile screen size and set rtl: true and center: true.

Problem 1: last slide (slide 5 on demo) not show when drag by mouse or touch.

Problem 2: If have one slide, then slide 1 not showing.

$(document).ready(function () {
    var owl = $('.owl-carousel');
    owl.owlCarousel({
        rtl: true,
        center: false,
        items: 4,
        responsiveClass: true,
        loop: false,
        nav: false,
        margin: 10,
        lazyLoad: false,
        autoplay: false,
        autoplayTimeout: 10000,
        smartSpeed: 200,
        autoWidth: true,
        responsive: {
            0: {
                items: 1,
                center: true,
                autoWidth: true
            },
            768: {
                items: 2,
                center: false,
                autoWidth: true
            },
            992: {
                items: 3,
                center: false,
                autoWidth: false
            },
            1200: {
                items: 4,
                center: false,
                autoWidth: false
            }
        }
    })
})

I create an example with js and css file from owlcarousel2.github.io with new owl carousel2 updates.

Demo problem:
https://jsfiddle.net/j7jg7ynb/6/

Dear @pascalporedda, Please check this.
Thank you

Most helpful comment

Don't spam

On Sat, 5 May 2018, 19:00 Milad Ghiravani, notifications@github.com wrote:

Dears, help me!

@daviddeutsch https://github.com/daviddeutsch
@zlyojciec https://github.com/zlyojciec
@greg5green https://github.com/greg5green
@nervo https://github.com/nervo
@OwlCarousel2 https://github.com/OwlCarousel2
@tdecaluwe https://github.com/tdecaluwe
@graingert https://github.com/graingert
@gabehayes https://github.com/gabehayes


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/OwlCarousel2/OwlCarousel2/issues/2320#issuecomment-386823939,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAZQTMgshn0cqHMoajMBpBhWo-LBGAsQks5tveisgaJpZM4TzZvH
.

All 8 comments

Dears, help me!

@daviddeutsch
@zlyojciec
@greg5green
@nervo
@OwlCarousel2
@tdecaluwe
@graingert
@gabehayes

Don't spam

On Sat, 5 May 2018, 19:00 Milad Ghiravani, notifications@github.com wrote:

Dears, help me!

@daviddeutsch https://github.com/daviddeutsch
@zlyojciec https://github.com/zlyojciec
@greg5green https://github.com/greg5green
@nervo https://github.com/nervo
@OwlCarousel2 https://github.com/OwlCarousel2
@tdecaluwe https://github.com/tdecaluwe
@graingert https://github.com/graingert
@gabehayes https://github.com/gabehayes


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/OwlCarousel2/OwlCarousel2/issues/2320#issuecomment-386823939,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAZQTMgshn0cqHMoajMBpBhWo-LBGAsQks5tveisgaJpZM4TzZvH
.

Did you figure it out?

@Khaledneo No!

I applied the hack-fix in the following link and it work for me

Did you get the problem solved please?

try it 👍
remove "responsive: {.....}" in owl-carousel.

JavaScript Code is below :
$(document).ready(function () {
var owl = $('.owl-carousel');
owl.owlCarousel({
rtl: true,
center: false,
items: 4,
responsiveClass: true,
loop: false,
nav: false,
margin: 10,
lazyLoad: false,
autoplay: false,
autoplayTimeout: 10000,
smartSpeed: 200,
autoWidth: true,
})
});

demo : https://jsfiddle.net/6pka1c2s/

Keep rtl false, 'startPosition: -1' worked for me

Was this page helpful?
0 / 5 - 0 ratings