Basic Any Content Slider Plugin For jQuery - circuit.js
File Size: | 4.1 KB |
---|---|
Views Total: | 830 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
circuit.js is a small and fast jQuery plugin that automatically slides through a list of html content like a carousel / slideshow.
How to use it:
1. Include jQuery library and the jQuery circuit.js plugin at the bottom of the web page.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="jquery.circuit.js"></script>
2. Embed your Html content into the automatic slider using Html unordered list.
<ul id="slider"> <li>HELLO</li> <li>WORLD</li> <li>THIS</li> <li>IS</li> <li>CIRCUIT</li> </ul>
3. Active the content slider.
$('#slider').circuit();
4. A little CSS to custom the slider.
#slider { background: #2C3E50; float: left; margin-left: -0px; padding: 100px 0; } #slider li { width: 720px; background: #E95546; height: 330px; margin: 0 125px; float: left; text-align: center; }
5. Default configuration properties.
$('#slider').circuit({ 'popin' : 120, 'speed' : 500, 'delay' : 500 });
This awesome jQuery plugin is developed by janjarfalk. For more Advanced Usages, please check the demo page or visit the official website.