Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
siwwar opened this issue Feb 20, 2012 · 29 comments
Open

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

siwwar opened this issue Feb 20, 2012 · 29 comments

Comments

@siwwar
Copy link

siwwar commented Feb 20, 2012

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
Copy link

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
Copy link

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
Copy link

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
Copy link

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
Copy link

mrsaleh commented Jan 12, 2014

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
Copy link

@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
Copy link

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
Copy link

gkRana commented Apr 4, 2014

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
Copy link

atatos commented Apr 22, 2014

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

@goukumar
Copy link

@puijob
Copy link

puijob commented May 8, 2014

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

@goukumar
Copy link

goukumar commented May 8, 2014

@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 👍
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
Copy link

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

@ne0c0de
Copy link

ne0c0de commented Jun 9, 2014

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
Copy link

Please try to add dir: ltr; to #landing_slider

@ne0c0de
Copy link

ne0c0de commented Jun 9, 2014

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
Copy link

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

@ne0c0de
Copy link

ne0c0de commented Jun 9, 2014

just tested with LTR but nothing changed :(

@fadifannoun
Copy link

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

@ne0c0de
Copy link

ne0c0de commented Jun 9, 2014

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

@fadifannoun
Copy link

You are welcome, good for you.

@goukumar
Copy link

@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
Copy link

@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
Copy link

gkRana commented Jul 25, 2014

@iraniamir
Copy link

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

@coder-rukon
Copy link

coder-rukon commented May 25, 2017

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

.bx-wrapper {
  direction: ltr;
}

@ouhdach
Copy link

ouhdach commented Jun 1, 2017

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

@rasheedammar
Copy link

rasheedammar commented Oct 4, 2018

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
Copy link

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>
    

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests