Lightweight Background Slideshow Plugin with jQuery and CSS3 - pureSlider
File Size: | 1.38 MB |
---|---|
Views Total: | 5515 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

pureSlider is a small and simple jQuery / Zepto background image slider plugin that utilizes CSS3 transitions and transforms for subtle image zoom transition effects.
How to use it:
1. Place jQuery / Zepto library and the jQuery pureSlider plugin in your web page.
<script src="jquery.min.js"></script> <!-- or zepto.js --> <script src="pureSlider.js"></script>
2. The html structure to build a background image slider.
<div class="container"> <div class="slide" style="background-image: url('1.jpg')">This is slide One</div> <div class="slide" style="background-image: url('2.jpg')">This is slide Two</div> <div class="slide" style="background-image: url('3.jpg')">This is slide Three</div> <div class="slide" style="background-image: url('4.jpg')">This is slide Four</div> <div class="ns-next"></div> <div class="ns-prev"></div> </div>
3. Initialize the plugin.
$('.container').pureSlider();
4. Add the basic CSS styles to the background image slider.
.container { display: block; position: relative; top: 33%; width: 100%; padding-bottom: 33%; border: none; overflow: hidden; } .slide { transition: 500ms ease all; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(2); } .slide.active { transform: scale(1); opacity: 1; top: 0; transition: 500ms ease all; } .ns-next, .ns-prev { position: absolute; top: 50%; width: 20px; height: 20px; margin-top: -10px; background-color: rgba(0,0,0,.65); } .ns-next { right: 25px; z-index: 10; } .ns-prev { left: 25px; z-index: 10; }
5. Available options with default values.
$('.container').pureSlider({ // animation speed animDuration: 500, // transition delay slideDuration: 2500, // CSS selectors slideNode: 'div.slide', nextButton: '.ns-next', prevButton: '.ns-prev', activeClass: 'active', // Show "Left", "Right" navigation showNavigation: false });
Change logs:
2016-07-17
- JS & CSS update
2016-07-08
- Fixed Active class is set twice on consecutive slides
2016-06-29
- Fixed transition
2016-01-17
- Code refactoring, removal of navigation for less that two slides.
2015-12-15
- Don't crash when there are no slides on stage
2015-12-08
- Fix for Opera 12
2015-10-11
- Fixes and class name change
2015-09-20
- Z-index handling removal, new 'activaded' state.
This awesome jQuery plugin is developed by Every0ne. For more Advanced Usages, please check the demo page or visit the official website.