Options

To see what the various settings look like when manipulated, check out the Demos section.

displayWidth

Description 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.
Options Any display width can be used.
Default 100%

animateSpeedMax

Description The fastest speed (shortest length of time) of the animated transition from one image to the next. Animation speed is equal to animateSpeedMax when the user's mouse is at the far end of the image container. Speed is in milliseconds.
Options Any animation speed can be specified. Should be a value less than or equal to animateSpeedMin.
Default 500

animateSpeedMin

Description The slowest speed (longest length of time) of the animated transition from one image to the next. Animation speed is equal to animateSpeedMin when the user's mouse triggers is closest to the center of the image container. Speed is in milliseconds.
Options Any animation speed can be specified. Should be a value less than or equal to animateSpeedMax.
Default 2000

delayMax

Description The duration that each image (and the related content) is displayed while the ImgWheel is in motion, i.e. being hovered over. This essentially sets the pause of the central image before it is animated to the next slot in the display when the animation is moving at its highest rate of speed. The pause is the difference between delayMax and animateSpeedMax. For instance, if delayMax is set to 800 and animateSpeedMax is set to 500, the pause on the central image during hovering will be 300 milliseconds when the user's cursor is at an extreme end of the image container. If the 'click' functionality is enabled (see below), this setting is irrelevant.
Options Any animation delay time can be specified. Must be greater than or equal to animateSpeedMax.
Default 500

delayMin

Description The duration that each image (and the related content) is displayed while the ImgWheel is in motion, i.e. being hovered over. This essentially sets the pause of the central image before it is animated to the next slot in the display when the animation is moving at its lowest speed. The pause is the difference between delayMin and animateSpeedMin. For instance, if delayMin is set to 2200 and animateSpeedMin is set to 2000, the pause on the central image during hovering will be 200 milliseconds when the user's cursor is near the center of the image container. If the 'click' functionality is enabled (see below), this setting is irrelevant.
Options Any animation delay time can be specified. Must be greater than or equal to animateSpeedMin.
Default 2000

imgPlacement

Description The vertical alignment of the images included in the slideshow display.
Options 'center', 'top', or 'bottom'
Default 'center'

direction

Description 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.
Options '' or 'reverse'
Default ''

functionality

Description The slideshow animation is triggered by hover or touch (when available) by default. Switching to 'click' causes directional arrows to appear when hovering over the display... clicking these arrows triggers one step of the slideshow scrolling. The speed of the transition animation when click is enabled is set using animateSpeedMax, so is 500 milliseconds by default.
Options '' or 'click'
Default ''

articleWidth

Description 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.
Options Any article width can be specified.
Default 100%

articleAlignment

Description 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.
Options 'center', 'left', or 'right'
Default 'center'

Using the Built-in Classes

ImgWheel comes with two built in CSS classes. These two classes are added and removed as part of the scrolling function. They allow you to manipulate how the central image and the other images in the slideshow look.

.onlyCentral

The .onlyCentral class is applied to the central image in the slideshow display. You might want to add a border or filter to this center image. Style away in your CSS!

.everythingBut

The .everythingBut class is applied to every image in the slideshow display except for the central image. Maybe you want these other images to be blurred, have limited opacity, or be in black and white. Apply whatever style you want to this class in your CSS file.

This is the ImgWheel plugin in it's most basic implementation. Scrolling is controlled by hovering over either side of the image display. The width of the display is set to 100% by default. The display and image sizes are responsive. If images included in the .image-container div are enclosed in an anchor tag, that link will only be active when an image is in the central position.