🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A simple, unobtrusive jQuery slider plugin for generating a basic, cross-browser image carousel/slider with optional navigation, pagination, autoplay and infinite loop support.

Carousel Image-Slider

Documentation

LuckySlider

Simple and easy slider based on jQuery

Settings (default):

    start: 1 // an element that will be active after initialization     nav: true // show prev & next navigation elements     dots: true // show navigation dots     cycle: true // cycle slider     swipe: true // if you are using jQuery Mobile slider will react on the swipe     auto: false // auto change     timeout: 3000 // auto change interval     beforeChange: function(){} // custom function that is called before the change     afterChange: function(){} // custom function that is called after the change

Methods:

    prev() // it makes active the previous item     next() // it makes active the next element     getActive() // returns the currently active element     setActive(number) // sets the active element

Examples:

$('.element').luckySlider({     start: 1,     nav: true,     dots: true,     cycle: true,     auto: false,     timeout: 3000,     beforeChange: function() {         console.log('Here you can use your function');     },     afterChange: function() {         console.log('Here you can use your function');     } });  var $el = $('.element02').luckySlider({     afterChange: function() {         console.log('Now active is: ' + $el.getActive());     } });

HTML before init:

<div>   <div></div>   <div></div>   <div></div> </div>

HTML after init:

<div class="_ls">   <div class="_ls__wrapper">     <div class="_ls__list">       <div class="_ls__list-item _ls-active" data-item="1"></div>       <div class="_ls__list-item" data-item="2"></div>       <div class="_ls__list-item" data-item="3"></div>     </div>        <div class="_ls__nav">       <a class="_ls__nav-prev" href="javascript:void(0);"></a>       <a class="_ls__nav-next" href="javascript:void(0);"></a>     </div>   </div>      <div class="_ls__dots">     <a class="_ls__dots-item _ls-active" data-dot="1" href="javascript:void(0);"></a>     <a class="_ls__dots-item" data-dot="2" href="javascript:void(0);"></a>     <a class="_ls__dots-item" data-dot="3" href="javascript:void(0);"></a>   </div> </div>

You May Also Like