Lof JSliderNews jQuery Plugin - Now with RTL Support

I've received a request asking to add RTL support to a jQuery slider plugin called Lof JSliderNews Plugin . Adding the RTL support was so simple and easy. Here's how it went:

1. Adding the rtloption

First thing I did is adding the rtl option to the settings object of the plugin.

this.settings = {
	direction : '',
	mainItemSelector  : 'li',
	navInnerSelector	: 'ul',
	navSelector : 'li' ,
	navigatorEvent : 'click'/* click|mouseenter */,
	wapperSelector:  '.sliders-wrap-inner',
	interval : 5000,
	auto  : false, // whether to automatic play the slideshow
	maxItemDisplay	 : 3,
	startItem : 0,
	navPosition : 'vertical',/* values: horizontal|vertical*/ 
	navigatorHeight	 : 100,
	navigatorWidth : 310,
	duration : 600,
	navItemsSelector : '.navigator-wrap-inner li',
	navOuterSelector  : '.navigator-wrapper' ,
	isPreloaded : true,
	easing : 'easeInOutQuad',
	onPlaySlider:function(obj, slider){},
	onComplete:function(slider, index){  }

This will make you turn on the RTL mode when initializing the plugin:

 $('#jslidernews1').lofJSidernews( { rtl:true} );	

2. Update the Plugin's JavaScript

Scan the plugin's JS for any "directional" statements and flip them based on the rtl setting. This plugin had only 3:

this.wrapper.css({'left':'-'+this.currentNo*this.maxSize+'px', 'width':( this.maxWidth ) * this.slides.length } );

...will be:

	this.wrapper.css({'right':'-'+this.currentNo*this.maxSize+'px', 'width':( this.maxWidth ) * this.slides.length } );
	this.wrapper.css({'left':'-'+this.currentNo*this.maxSize+'px', 'width':( this.maxWidth ) * this.slides.length } );


return ['left', this.settings.navigatorWidth];

...will be:

	return ['right', this.settings.navigatorWidth];
	return ['left', this.settings.navigatorWidth];


return ['left','width'];

...will be:

	return ['right','width'];
	return ['left','width'];

3. RTL the CSS

The CSS is really simply and most of it is "design/style" related. I've created -rtl.css files that flipped the directional CSS rules in each one. For example, in style1.css, the slider layout section will be in the style1-rtl.css file:

/* slider layout */
.lof-slidecontent .preload{	left:auto;	right:0;	}
.lof-slidecontent  ul.sliders-wrap-inner li{float:right;}
.lof-slidecontent  .lof-opacity  li{left:auto;	right:0; }
.lof-slidecontent  .navigator-content { right:auto; left:10px;}
.lof-slidecontent  .navigator-wrapper{float:right}
.lof-slidecontent  ul.navigator-wrap-inner li{ margin-right:0px;float:right;}

4. Enabling the RTL mode

We'll make use of the changes we made by :

  1. Linking the new RTLed CSS files:

  2. Enabling the rtl option in the initialization code:

    $('#jslidernews1').lofJSidernews( { interval : 4000,
    						direction	: 'opacitys',	
    						easing: 'easeInOutExpo',
    						duration: 1200,
    						auto	: true,
    						maxItemDisplay  : 4,
    						navPosition  : 'horizontal', // horizontal
    						navigatorHeight : 32,
    						navigatorWidth  : 80,
    						mainWidth	: 980,
    						buttons	: buttons 
    						,rtl:true} );	
  3. 5. Enjoy =)

    You can download the source and view the demo through the buttons below.
    Feel free to share your feedback in the comments below(especially if it doesn't work)
    Thank you Ramyh for the request.

Average: 3.6 (37 votes)


thank you it's useful

hi ... thank you ... very nice

How can I change navigatorEvent : 'click' to mouseover event?


Hello. I want to use Lof JSliderNews for 2 slide in one page, but only one run, another isn't. Please help me. Thank you a lot! :)

Definitely believe that which you said. Your favorite justification appeared to be on the neet
the easiest thing to be aware of. I say to you, Icertainly get annoyed while people consider worries
that they plainly do not know about. You managed to hit the naill upon the top
annd defined out the whole thing without having side effect , people can take a signal.
Will likely bee back to get more. Thanks

How to responsive with Lof JSliderNews
Thanks a lot

Thanks you very much ! ^_^

Add new comment

Twitter Updates

Recent comments

Who's online

There is currently 1 user online.