Minimal Responsive Content Slider with jQuery and CSS3 - Stupid Slider
File Size: | 42.2 KB |
---|---|
Views Total: | 2106 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.