Slider doesn't appear in the RTL ( Right to left ) direction pages

[siwwar]

If the slider's container was in RTL ( Right to left ) direction the slider will not appear in the right position, i think this issue is common in the RTL languages websites like Arabic.

[ifightforusers]

It doesn't show in IE7 only when in RTL (Right to Left mode). All attempts to modify the CSS to fix this problem have been unsuccesful...

[frankblundt]

although it doesn't resolve the issue when the slide content is also rtl, if you specify css for [slider container element] div {direction: ltr;} at least the slides work

[Caparico]

What I did to resolve this was dir="rtl" on every slide, but not on the slides container. Seems to work fine. I should probably mention that my slides content is textual, not images.

[acarnwath]

I can confirm that @Caparico's fix works.

Expanding upon it, I had dir="rtl" on the body, so I put dir="ltr" on the parent of the slider container, and then dir="rtl" on each of the slides.

[mrsaleh]

replace this line in js file :

            var propValue = slider.settings.mode == 'vertical' ? 'translate3d(0, ' + value + 'px, 0)' : 'translate3d(' + value + 'px, 0, 0)';

with

            var propValue = slider.settings.mode == 'vertical' ? 'translate3d(0, ' + value + 'px, 0)' : 'translate3d(' + (-1*value) + 'px, 0, 0)';

[Danovadia]

@mrsaleh thats exactly what i did just yesterday but if you wish to use the bxSlider with no css ("useCSS: false" makes the slider use no css3 and only js), this method will not work. but thx, it certainly works :)

if someone has an idea how to support rtl (non of the tricks in this thread didn't worked for me) i will be glad to hear about it!

[mohsinabdul]

I have tried solution of "mrsaleh", the images are not appearing & rotating but there is one problem, when the first item is displayed, it is not complete, it shows part of my last image. and so then the rotation starts, each next image contains show part of previous image. I think that initial left position is not set correctly, any idea how to resolve it

[gkRana]

Hi,

Follow the below mentioned steps on bxSlider to make the RTL :-

1. Replace this line no(219) 'float': slider.settings.mode == 'horizontal' ? 'right' : 'none',

2. Replace this line no(495) in setSlidePosition function var position = el.width()-slider.children.eq(slider.active.index * getMoveBy()).position();

3. Replace this line no(1183) var value = slider.settings.mode == 'horizontal' ? (el.width()-position.left - moveBy-215) : -position.top;

4. Put the RTL direction on body {direction: ltr}

Thanks Gourav Kumar

[atatos]

@gkRana that's not enough to make it the RTL, Can you do an example and show us ?

[goukumar]

example :- https://github.com/ranag/bx-slider-RTL/blob/master/index.html

[puijob]

@gkRana where does -215 come from? I don't think it should be there.

[goukumar]

@puijob:- check on line no: 191 el.css({ width: slider.settings.mode == 'horizontal' ? (slider.children.length * 100 + 215) + '%' : 'auto', position: 'relative' }); while calculate the width for slider they are putting amount of 215 hard coded. so I have removed that value when I am doing calculate the position of current element. so what I doing here :+1: el.width()-position.left-215 First I check the total width of slider and then caluclate the left position of the element and remove it from the total width of the slider and minus 215 which are added hard coded during the slider width calculation. so in this way I get the carousel position 0.

Still if you are facing any issue in RTL, Let me know or you can share your code with me.

[fadifannoun]

Just add LTR to the main UL or dive containing those children

[ne0c0de]

I'm facing this issue on on http://www.alaproperty.com/ar/l

i added dir="rtl" to slider divs but it didn't resolve the problem. Any suggestions?

[fadifannoun]

Please try to add dir: ltr; to #landing_slider

[ne0c0de]

Added but nothing changed. Final unworking code:

        <div id="landing_slider" dir="rtl" style="direction:rtl">
            <div dir="rtl" style="direction:rtl"><img src="/images/1.jpg" /></div>
            <div dir="rtl" style="direction:rtl"><img src="/images/2.jpg" /></div>
            <div dir="rtl" style="direction:rtl"><img src="/images/3.jpg" /></div>
            <div dir="rtl" style="direction:rtl"><img src="/images/4.jpg" /></div>
        </div>

[fadifannoun]

Not RTL use LTR instead for #landing_slider and test it for children DIVs

[ne0c0de]

just tested with LTR but nothing changed :(

[fadifannoun]

I've tested with several sites, you may need to add LTR to parent nodes too. Try it

[ne0c0de]

now it's ok. i added it to 4. upper div and now it's working. thanks

[fadifannoun]

You are welcome, good for you.

[goukumar]

@ne0c0de : What about the text. Yet you are just using the images its looking fine, But if you will put the text instead of images it will appear from Left-To-Right. however it should appear Right-to-Left.

[anberrana]

@fadifannoun I tried rtl on body , ltr on parent (ul)div , rtl on child div(li) , but not helped....plz give me suggestion.Thanks

[gkRana]

@anberrana:- try this https://github.com/ranag/bx-slider-RTL

[iraniamir]

Hi, i have this problem on 4.2.5 items dont start from right !!!

[coder-rukon]

try with css. no need to change any other code. jus use in css .it's working for me :)

.bx-wrapper {
  direction: ltr;
}

[ouhdach]

@coder-rukon thanks bro its what i looking for easy and helpful

[rasheedammar]

try with css. no need to change any other code. jus use in css .it's working for me :)

.bx-wrapper {
  direction: ltr;
}

it is work thanks , but arrow is hide then show how fix it to Chang slide if want ?

[hamza1886]

What worked for me on Arabic page

1. add dir="ltr" style="direction: ltr;" on parent of .bxslider (to show images and text of each slider).

2. add dir="rtl" style="direction: rtl;" (to show correct direction of Arabic language text from right-to-left).

    <div dir="ltr" style="direction: ltr;">
        <div class="bxslider">
            <div dir="rtl" style="direction: rtl;"><img src="/images/1.jpg" /></div>
            <div dir="rtl" style="direction: rtl;"><img src="/images/2.jpg" /></div>
            <div dir="rtl" style="direction: rtl;"><img src="/images/3.jpg" /></div>
            <div dir="rtl" style="direction: rtl;"><img src="/images/4.jpg" /></div>
        </div>
    </div>