RLT Support

[jihanesaadeh]

Hello,

I'm working on a multi-lingual website. Does the Liquid Slider support rtl websites?

Thanks, Jihane

[KevinBatdorf]

Do you mean like, if you click the right arrow it will move to the left slide? If so, then no, but you could program the arrows outside of the slider using the custom controls

[jihanesaadeh]

I mean when I'm changing the language to Arabic, and direction to rtl (as follow):

the slider totally disappears from my page.

[KevinBatdorf]

I'd have to see an example. Do you have it online somewhere?

[jihanesaadeh]

Hello,

I've uploaded a WIP version: http://216.172.166.19/~upload/jihane/index.html

Thank you, Jihane

[KevinBatdorf]

Seems there's a javascript error on the page from jquery history. It might be unrelated but that stops other code from firing off

[jsaade]

If you have a direction=rtl tag on elements (div, body, etc..) liquid slider does not work and renders blank image with correct height. @KevinBatdorf do you have a working RTL example?

Thanks

[KevinBatdorf]

I don't have a working example. But if you have a non-working one I can try to debug why it's not working.

[BackuPs]

I have the same problem on rtl the content of the tabs is not shown because of this js

`

(_this.panelContainer).css({ '-webkit-transform': 'translate3d(' + marginLeft + _this.pSign + ', 0, 0)', '-moz-transform': 'translate3d(' + marginLeft + _this.pSign + ', 0, 0)', '-ms-transform': 'translate3d(' + marginLeft + _this.pSign + ', 0, 0)', '-o-transform': 'translate3d(' + marginLeft + _this.pSign + ', 0, 0)', 'transform': 'translate3d(' + marginLeft + _this.pSign + ', 0, 0)' });

`

[KevinBatdorf]

@BackuPs This plugin hasn't been updated in many years, but if you want to share a link to your site maybe I can give a tip. There's probably better plugins to use though...

[BackuPs]

The solution is simple change this function

`

LiquidSlider.getTransitionMargin = function() {
  var _this = this;

  var rtl = jQuery('body' ).hasClass('rtl')

  if (rtl)  return ( 100 - ( ( _this.nextPanel + 1) * _this.slideDistance) ) -
    (_this.slideDistance * ~~(_this.options.continuous));

  return -(_this.nextPanel * _this.slideDistance) -
    (_this.slideDistance * ~~(_this.options.continuous));
};

`