Minimal Animated Image Slider with jQuery and CSS3 - QFocus
| File Size: | 861 KB |
|---|---|
| Views Total: | 8084 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
QFocus is an easy lightweight jQuery plugin to create an infinite-looping carousel from an unordered list of images, animated with CSS3 transitions or jQuery animate() function for old browsers.
How to use it:
1. Load the QFocus.css in the header and the QFocus.js after jQuery library before closing body tag.
<head> ... <link rel="stylesheet" href="path/to/QFocus.css"> ... </head> <body> ... <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script src="path/to/QFocus.js"></script> </body>
2. Insert an list of images into a container element as follow.
<div id="demo" class="QFocus">
<ul>
<li><a href="#" title="Title 1"><img src="images/1.jpg"></a></li>
<li><a href="#" title="Title 2"><img src="images/2.jpg"></a></li>
<li><a href="#" title="Title 3"><img src="images/3.jpg"></a></li>
<li><a href="#" title="Title 4"><img src="images/4.jpg"></a></li>
</ul>
</div>
3. Initialize the image carousel with minimal setup.
$("#demo").QFocus();
4. Available settings to customize the image carousel.
// the width of your image carousel
width : 600,
// the height of your image carousel
height : 300,
// show carousel title
title : false,
// animation type
// slide or fade
type : "slide",
// animation speed
duration : 500,
// delay time between slides
interval : 5000,
// arrows navigation
arrowControl : true,
// prev button
prevBtn : null,
// next button
nextBtn : null,
// pagination
navControl : true,
// fired when initialized
afterInit : function(){}
This awesome jQuery plugin is developed by sliwey. For more Advanced Usages, please check the demo page or visit the official website.
