Stupid Slider
A slider built to harness CSS transitions, instead of slow javascript ones. It will toggle classes on your slide elements, and shift the elements around to create a seamless, loopable slider. Wanna see for yourself? Check out this Live Demo
Why? It's 2014, man. Lets add transitions to everything.
Options
interval {integer} default: false Number of milliseconds before going to next slide hoverPause {bool} default: false Stop the timer (interval) when hovering over the slider loop {bool} default: false Should the slider loop back and forth nextAndPrev {bool} default: false Adds "next" and "prev" buttons controls {bool} default: false "1 2 3" style controls nextText {string} default: "Next" What does the next button say prevText {string} default: "Prev" What does the prev button say nextCtrlClass {string} default: "stupid-next" Classname applied to the next button prevCtrlClass {string} default: "stupid-prev" Classname applied to the prev button controlsClass {string} default: "stupid-controls" Classname applied to the controls wrapper controlItemClass {string} default: "stupid-control" Classname applied to each control controlItemText {string} default: slide index (int) The text (or innerHtml) of each control Contributing
This project utilizes Grunt JS to compile/minify javascripts. If you haven't already, read the getting started guide. After Grunt has been installed, open your terminal, and cd into the project directory. Then:
$ sudo npm install $ gruntRunning grunt will minify javascripts, and place them in the correct directories, once. If you would like to "watch" for changes as you work, run grunt watch.
Notes
- Want to remove the transition to the first slide on init? Add a "no-transition" class to your slider (include the proper css). After the plugin is initialized, we'll remove the class for ya.
