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 ?
Put this code in css file
.owl-carousel,
.bx-wrapper { direction: ltr; }
.owl-carousel .owl-item { direction: rtl; }
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With