Owl Carousel is not working with direction RTL

Question

The Owl Carousel slider is not working with RTL. I add rtl: true in the configuration. But it's not loading the slider. The slider space is there and navigation is showing. But only the slider content is not showing. How can I fix this problem?

My code is given below:

<div class="row" id="brand-slider">
    <div class="item">
        <a href="#">
        <img src="{base_url()}assets/upload/brands/{$v.image}" class="img-responsive img-centered" alt="{$v.name}">
        </a>
    </div>
    <div class="item">
        <a href="#">
        <img src="{base_url()}assets/upload/brands/{$v.image}" class="img-responsive img-centered" alt="{$v.name}">
        </a>
    </div>
    <div class="item">
        <a href="#">
        <img src="{base_url()}assets/upload/brands/{$v.image}" class="img-responsive img-centered" alt="{$v.name}">
        </a>
    </div>
    <div class="item">
        <a href="#">
        <img src="{base_url()}assets/upload/brands/{$v.image}" class="img-responsive img-centered" alt="{$v.name}">
        </a>
    </div>
</div>

<script>
    $("#brand-slider").owlCarousel({
        rtl: true,
        loop: true,
        items: 6,
        pagination: false,
        autoPlay: true,
        responsive: true
    });
</script>

Thank god, that issue waste my long time. Now i found the issue and fixed. Just add style "direction: ltr" to parent Id or class. In my case — Rayees Pk, Aug 14 '16 at 07:53

score 15 · Accepted Answer · edited May 27 '19 at 10:32

15

This solution worked for me

Add direction: ltr; to the the .owl-stage-outer class in the owl.carousel.min.css file , as following

.owl-stage-outer{
 position:relative;
 overflow:hidden;
 -webkit-transform:translate3d(0,0,0);
 direction: ltr;
}

edited May 27 '19 at 10:32

Omi

3,954
5
21
41

answered May 27 '19 at 10:29

khaled saleh

470
7
18

score 5 · Answer 2 · answered Aug 15 '20 at 04:45

5

just add to your CSS

.owl-carousel{
 direction: ltr !important;
}

other solutions will work but will make the carousel jumps as you drag it right or left

answered Aug 15 '20 at 04:45

M.Ali El-Sayed

1,608
20
23

score 2 · Answer 3 · answered Jul 19 '21 at 19:16

For make Owl-Carousel-Version-1 RTL follow these steps :

step-1 : add this codes to your css file

.owl-carousel .owl-item {
   float: right !important;
}

.owl-carousel .owl-wrapper-outer {
   direction: rtl !important;
}

step-2 : open owl.carousel.js then search transform and replace this lines

"-webkit-transform": "translate3D(" + pixels + "px, 0px, 0px)",
"-moz-transform": "translate3d(" + pixels + "px, 0px, 0px)",
"-o-transform": "translate3d(" + pixels + "px, 0px, 0px)",
"-ms-transform": "translate3d(" + pixels + "px, 0px, 0px)",
"transform": "translate3d(" + pixels + "px, 0px,0px)"

to this (we have to change pixel to -pixel) :

"-webkit-transform": "translate3D(" + -pixels + "px, 0px, 0px)",
"-moz-transform": "translate3d(" + -pixels + "px, 0px, 0px)",
"-o-transform": "translate3d(" + -pixels + "px, 0px, 0px)",
"-ms-transform": "translate3d(" + -pixels + "px, 0px, 0px)",
"transform": "translate3d(" + -pixels + "px, 0px,0px)"

Owl-Carousel-Version-2 already has this feature.

score 0 · Answer 4 · answered Jan 08 '20 at 09:41

0

Add This Code To Your Css File

.owl-carousel .owl-item,
.owl-wrapper {
    float: right;
}

answered Jan 08 '20 at 09:41

mohazh

1
2

score 0 · Answer 5 · answered Jun 03 '21 at 05:45

0

Find this code translate3d("+b+"px,0px,0px) in owl.carousel.min.js and change it to this code translate3d("+(-b)+"px,0px,0px).

answered Jun 03 '21 at 05:45

mahmood

1
1

score 0 · Answer 6 · answered Dec 29 '21 at 09:58

In the owl.carousel.js file

search for transform you should find something like this

transform: 'translate3d("+b+"px,0px,0px)'

see this "+b+" replace it with "+-b+" it ends up like this

transform: "translate3d(" + -b + "px,0px, 0px)"

Notes this will not work in ltr versions so in my case I am using dynamic application so made 2 files and I called the english version without minus " + b + " and the rtl I added this minus.

it may help someone.

score 0 · Answer 7 · answered Jun 21 '22 at 11:21

0

I noticed there is an option for owl slider

$('.owl-carousel').owlCarousel({
    rtl:true,

So you can use that and it will solve the issue.

answered Jun 21 '22 at 11:21

Kaloyan Stamatov

3,894
1
20
30

Accentus Consulting · Answer 8 · 2022-12-13T07:07:53.627

0

Upadet your owl carousal version, use owl carousel 2 or update your js and css file.Then use rtl:true,

edited Dec 13 '22 at 07:07

answered Dec 09 '22 at 11:33

Accentus Consulting

1
2

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 14 '22 at 15:52

Owl Carousel is not working with direction RTL

8 Answers8

Linked