Responsive & Auto-sliding jQuery Slideshow Plugin - ImgWheel

ImgWheel is a responsive, extensible and endless jQuery slideshow plugin that will enlarge the central image to focus your users on the current slide.

Features:

• Auto-rotation on mouse hover.
• Custom animation speed and rotation delay.
• Custom sliding directions.
• Endless looping like a carousel.
• Supports unlimited images.

How to use it:

1. Load the jQuery library and the jQuery ImgWheel plugin in the Html page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.ImgWheel.min.js"></script>

2. Insert a group of images into your page as follows.

<div id="demo">
  <div class="image-container">
    <img src="img/1.jpg">
    <img src="img/2.jpg">
    <img src="img/3.jpg">
    ...
  </div>
</div>

3. You can also add some content after image container.

<div class="article-container">
  <article>Slide 1</article>
  <article>Slide 2</article>
  <article>Slide 3</article>
  ...
</div>

4. Initialize the plugin with default settings.

$('#demo').ImgWheel();

5. Add in any CSS styling you want on your own.

6. Default settings.

• animateSpeed: 500: The speed (length of time) of the animated transition from one image to the next. Speed is in milliseconds.
• delay: 1000: The duration that each image (and the related content) is displayed while the ImgWheel is in motion, i.e. being hovered over. If the 'click' functionality is enabled (see below), this setting is irrelevant.
• imgPlacement: 'center': The vertical alignment of the images included in the slideshow display.
• displayWidth: '100%': This is the width of the entire ImgWheel display, which includes the slideshow and any other related content below the slideshow but within the targeted <div>. Relative sizing allows for responsiveness, whereas switching to a fixed width (in px) will negate this functionality.
• direction: '': Controls the direction that the images will animate in. By default, images move to the right when hovering or clicking on the left side of the display. Using 'reverse' will cause images to move to the left when hovering or clicking on the left side of the display.
• articleWidth: '100%': This is the width of associated article display. It is set relative to the displayWidth. For example, if displayWidth is set to 70% and articleWidth is set to 50%, the article width will be 50% of the display width and 35% of the parent container width. This width is responsive. Again, specifying a fixed width negates this responsiveness.
• articleAlignment: 'center': The articles in the .article-container <div> are centered by default, regardless of their specified width. They can also be aligned to the left or right of the container.
• functionality: '':

Change logs:

2014-08-14

• updated min with major IE bug repair
• added src attr reset to existing .each()

2014-08-09

• fixed glitch for multiple click enabled imgwheels on one page

---

This awesome jQuery plugin is developed by benjanes. For more Advanced Usages, please check the demo page or visit the official website.