Lightweight jQuery Carousel With Image Panning Effect - Visual Pan
File Size: | 13.4 KB |
---|---|
Views Total: | 1982 |
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.