Skip to content
jQuery content slider
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


a simple jQuery content rotator. You can use it as a simple slider in your header or like a changing background for your whole page.


  • Horizontal slide
  • Vertical slide
  • Fading slides
  • External controls
  • HTML content slider
  • IMAGE slide
  • aRotator inside aRotator (slider in slide)



  • [new] $('#element').aRotator(3) will slide to slide number 3
  • [new] $('#element').aRotator('stop'), use with onSlideStart if you want prevent sliding
  • [new] $('#element').aRotator('continue'), use with onSlideStart to continue sliding
  • [del] $('#element').aRotator('first') removed, use $('#element').aRotator(1) instead
  • [fix] keepImageRatio: 'image', not fitting images on page load


  • [new] feature: use aRotator inside aRotator
  • [new] onSlideStart parameter - execute a function on slide start
  • [new] onSlideEnd parameter - execute a function on slide end
  • [new] <li> slides now can take data-title and data-href attrubutes for using in paging
  • [new] $('#slider').aRotator('first'); go to the first slide


  • initial public release


####required structure

<ul> <!-- can be div too -->
        <img />
        <img />
          html content

####create aRotator


create aRotator without autoplay and 5 seconds interval

    autoplay: false,
    interval: 5000


play: $("#mySlider").aRotator('play');

pause: $("#mySlider").aRotator('pause');

next: $("#mySlider").aRotator('next');

prev: $("#mySlider").aRotator('prev');

goto slide #2: $("#mySlider").aRotator(2);

####default options

style: "horizontal", // slider style "vertical" or "fading"
autoplay: true, // start slideshow on page load
interval: 4000, // delay between slides
duration: 600, // animation duration
easing: "swing", // "swing" is the jQuery default
hoverStop: true, // stop sliding while the mouse is over the aRotator

inverseVertical: false, // slide vertically from bottom to top

playPauseButton: true, // show play/pause button 
  	pauseText: "Pause", //
  	playText: "Play", //

navigation: true, // show Next/Previous buttons
  	nextText: ">", // next button text
  	prevText: "<", // previous button text

pagingID: "default", // div "id" / "default" default paging / "none" to not display
  	showPageNumber: false, // show page number

	keepRatio: false, // "image" - keep pictures' scale ratio | only false or 'image' for now
You can’t perform that action at this time.