lightslider-rtl
Version:
jQuery lightSlider is a lightweight responsive content slider - carousel with animated thumbnails navigation with RTL Support
175 lines (144 loc) • 5.13 kB
Markdown
jQuery lightSlider
=============
Demo
----------------
[JQuery lightSlider demo](http://sachinchoolur.github.io/lightslider/)
Description
----------------
JQuery lightSlider is a lightweight responsive Content slider with carousel thumbnails navigation
Main Features
----------------
+ Fully responsive - will adapt to any device.
+ Separate settings per breakpoint.
+ Gallery mode to create an image slideshow with thumbnails
+ Supports swipe and mouseDrag
+ Add or remove slides dynamically.
+ Small file size, fully themed, simple to implement.
+ CSS transitions with jQuery fallback.
+ Full callback API and public methods.
+ Auto play and infinite loop to create a content carousel.
+ Keyboard, arrows and dots navigation.
+ Chrome, Safari, Firefox, Opera, IE7+, IOS, Android, windows phone.
+ Slide and Fade Effects.
+ Auto width, Vertical Slide, Adaptiveheight, Rtl support...
+ Multiple instances on one page.
+ Slide anything (youtube, vimeo , google map ...)
How to use lightSlider?
--------------------
### Bower
You can Install lightslider using the [Bower](http://bower.io) package manager.
```sh
$ bower install lightslider
```
### npm
You can also find lightslider on [npm](http://npmjs.org).
```sh
$ npm install lightslider
```
### The code ###
add the Following code to the <head> of your document.
```html
<link type="text/css" rel="stylesheet" href="css/lightslider.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/lightslider.js"></script>
// Do not include both lightslider.js and lightslider.min.js
```
### HTML Structure ###
```html
<ul id="light-slider">
<li>
<h3>First Slide</h3>
<p>Lorem ipsum Cupidatat quis pariatur anim.</p>
</li>
<li>
<h3>Second Slide</h3>
<p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p>
</li>
...
</ul>
```
### Call lightSlider! ###
```html
<script type="text/javascript">
$(document).ready(function() {
$("#light-slider").lightSlider();
});
</script>
```
### Play with settings ###
```html
<script type="text/javascript">
$(document).ready(function() {
$("#light-slider").lightSlider({
item: 3,
autoWidth: false,
slideMove: 1, // slidemove will be 1 if loop is true
slideMargin: 10,
addClass: '',
mode: "slide",
useCSS: true,
cssEasing: 'ease', //'cubic-bezier(0.25, 0, 0.25, 1)',//
easing: 'linear', //'for jquery animation',////
speed: 400, //ms'
auto: false,
pauseOnHover: false,
loop: false,
slideEndAnimation: true,
pause: 2000,
keyPress: false,
controls: true,
prevHtml: '',
nextHtml: '',
rtl:false,
adaptiveHeight:false,
vertical:false,
verticalHeight:500,
vThumbWidth:100,
thumbItem:10,
pager: true,
gallery: false,
galleryMargin: 5,
thumbMargin: 5,
currentPagerPosition: 'middle',
enableTouch:true,
enableDrag:true,
freeMove:true,
swipeThreshold: 40,
responsive : [],
onBeforeStart: function (el) {},
onSliderLoad: function (el) {},
onBeforeSlide: function (el) {},
onAfterSlide: function (el) {},
onBeforeNextSlide: function (el) {},
onBeforePrevSlide: function (el) {}
});
});
</script>
```
### Public methods ###
```html
<script type="text/javascript">
$(document).ready(function() {
var slider = $("#light-slider").lightSlider();
slider.goToSlide(3);
slider.goToPrevSlide();
slider.goToNextSlide();
slider.getCurrentSlideCount();
slider.refresh();
slider.play();
slider.pause();
slider.destroy();
});
</script>
```
### Report an Issue ###
If you think you might have found a bug or if you have a feature suggestion please use github [issue tracker](https://github.com/sachinchoolur/lightslider/issues/new). Also please try to add a jsfiddle that demonstrates your problem
If you need any help with implementing lightslider in your project or if have you any personal support requests i requset you to please use [stackoverflow](https://stackoverflow.com/) instead of github issue tracker
If you like lightSlider support me by staring this repository or tweet about this project.
[@sachinchoolur](https://twitter.com/sachinchoolur)
#### [guidelines for contributors](https://github.com/sachinchoolur/lightslider/blob/master/contributing.md)
#### MIT © [Sachin](https://twitter.com/sachinchoolur)