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

Stupid Slider is a really simple and lightweight jQuery content slider/slideshow plugin that features CSS3 based transition effects.

Responsive CSS3 transitions

Documentation

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 $ grunt

Running 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.

You May Also Like