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
   
Lightweight jQuery Carousel With Image Panning Effect - Visual Pan

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.