This time I will share jQuery Plugin and tutorial about Lightweight jQuery Carousel With Image Panning Effect – Visual Pan, hope it will help you in programming stack.
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.
1 |
<link href="dist/css/vispan.css" rel="stylesheet"> |
2 |
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> |
3 |
<script src="dist/js/vispan.js"></script> |
2. Insert a set of images into a DIV container.
2 |
<div><img src="1.jpg"></div> |
3 |
<div><img src="2.jpg"></div> |
4 |
<div><img src="3.jpg"></div> |
3. Set the height of the carousel in the CSS
4. Initialize the plugin and done.
1 |
$('#example').vispan(); |
5. Plugin’s default settings.
3 |
back_to_top_duration: 1000, |
4 |
slide_change_duration: 500, |
6 |
shadow_overlay_opacity: 0, |
7 |
button_toggle_duration: 200, |
This awesome jQuery plugin is developed by StudioLE. For more Advanced Usages, please check the demo page or visit the official website.
