Minimal Responsive Content Slider with jQuery and CSS3 - Stupid Slider

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

How to use it:

1. Load the jQuery javascript library and JQuery stupid slider plugin at the bottom of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="dist/jquery.stupid-slider.min.js" type="text/javascript"></script> 

2. The mark html structure to build a slider.

<div id="slider">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>

3. The required CSS to style the slider.

#slider {
position: relative;
margin: 0 0 20px 0;
width: 100%;
height: 80%;
overflow: hidden;
background: #263339;
}
#slider .slide {
position: absolute;
top: 0;
left: 100%;
display: block;
width: 100%;
height: 100%;
background-color: #34464f;
-webkit-transition: left 500ms ease;
-moz-transition: left 500ms ease;
-ms-transition: left 500ms ease;
-o-transition: left 500ms ease;
transition: left 500ms ease;
}
/* Hold Transitions */
#slider.no-transition .slide {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
/* Animations */
#slider .slide.old {
left: -100%;
}
#slider .slide.visible {
left: 0;
z-index: 10;
}
#slider .slide.next {
left: 100%;
}

4. Initialize the plugin.

<script type="text/javascript">
var slider = $("#slider").stupidSlider().data("stupidSlider");
</script>

5. Public Api to control the slider.

<button id="prev">Prev</button>
<button id="next">Next</button>

<script type="text/javascript">
$("#next").on("click", slider.next);
$("#prev").on("click", slider.previous);
</script>

Change log:

2014-04-06

• Add 'control' navigation, fix incorrect output from API method getCurrentSlide()

2014-03-10

• Adding ontransition callback

2014-03-06

• Allow custom HTML for text

2014-03-05

• Prevent explosion if only one slide.

2014-03-04

• Adding timer, and hover pause options

2014-03-03

• added loop supprort

---

This awesome jQuery plugin is developed by mattgoucher. For more Advanced Usages, please check the demo page or visit the official website.