Simple Click-through Content Slider with jQuery and CSS3
File Size: | 1.76 KB |
---|---|
Views Total: | 2811 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A simple yet multi-purpose jQuery content slider which allows you to cycle through a set of DIV elements with smooth CSS3 fade transitions.
How to use it:
1. Insert a set of content slides into the slider.
<div class="slider"> <div class="slide active"> <h2>Slide One</h2> <p>Content One</p> </div> <div class="slide"> <h2>Slide Two</h2> <p>Content Two</p> </div> <div class="slide"> <h2>Slide Three</h2> <p>Content Three</p> </div> </div>
2. The primary CSS styles.
.slider { position: fixed; top: 50%; left: 50%; width: 700px; height: 300px; margin-left: -350px; margin-top: -150px; overflow: hidden; border-radius: 7px; background-color: black; } .slider .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: white; padding: 40px; text-align: center; font-size: 20px; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; opacity: 0; cursor: pointer; } .slider .slide.active { opacity: 1; }
3. Load the needed jQuery JavaScript library in the document.
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
4. The JavaScript to enable the content slider.
$(document).ready(function () { $('.slider').on('click', function () { if ($('.active').next('.slide').length) { $('.active').removeClass('active').next('.slide').addClass('active'); } else { $('.active').removeClass('active'); $('.slide').first().addClass('active'); } }); });
This awesome jQuery plugin is developed by Lewitje. For more Advanced Usages, please check the demo page or visit the official website.