Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

owl carousel slider not working with rtl

I have a problem with the owl carousel slider.

When my html page opening tag is: <html> , the slider works fine and I can see the images.

But when my page opening is: <html dir="rtl">, the slider is not working, I mean I see arrows, and pagination but not the pictures itself:

here is my code:

$("#owl-demo").owlCarousel({
            navigation : false,
            rtl:true,
            slideSpeed : 300,
            paginationSpeed : 400,
            singleItem:true
          });

any help please ?

like image 328
Mikha Matta Avatar asked Nov 27 '22 04:11

Mikha Matta


2 Answers

Put this code in css file

.owl-carousel,
.bx-wrapper { direction: ltr; }
.owl-carousel .owl-item { direction: rtl; }
like image 69
Priyank Sheladiya Avatar answered Dec 09 '22 18:12

Priyank Sheladiya


No need to manually add custom CSS rules anywhere (especially that direction: ltr)...

Owl Carousel v2.3.4

$('.owl-carousel').owlCarousel({
    rtl:true // add this to the rest of the options
});

After adding that, Owl Carousel automatically appends an 'owl-rtl' class to the carousel HTML element, and then the plugin's CSS rules will automatically trigger rtl functionality.

like image 34
P-S Avatar answered Dec 09 '22 19:12

P-S