Lightweight jQuery Carousel With Image Panning Effect - Visual Pan
| File Size: | 13.4 KB |
|---|---|
| Views Total: | 1991 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Visual Pan is a lightweight jQuery carousel plugin that slides infinitely through a set of images with a subtle panning effect on mouse move.
How to use it:
1. Place jQuery library and the jQuery visual pan plugin's file into the html page.
<link href="dist/css/vispan.css" rel="stylesheet"> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="dist/js/vispan.js"></script>
2. Insert a set of images into a DIV container.
<div id="example"> <div><img src="1.jpg"></div> <div><img src="2.jpg"></div> <div><img src="3.jpg"></div> </div>
3. Set the height of the carousel in the CSS
#example {
height: 450px;
max-width:960px;
}
4. Initialize the plugin and done.
$('#example').vispan();
5. Plugin's default settings.
$('#example').vispan({
scroll_duration: 400,
back_to_top_duration: 1000,
slide_change_duration: 500,
dead_zone: 0.1,
shadow_overlay_opacity: 0,
button_toggle_duration: 200,
refresh_interval: 100
});
This awesome jQuery plugin is developed by StudioLE. For more Advanced Usages, please check the demo page or visit the official website.










