Fully Responsive jQuery Image Slideshow Plugin - PgwSlider

PgwSlider is a light and responsive jQuery slideshow plugin that automatically or manually switches your images with a simple fade-in effect. The plugin utilizes the image alt attribute for the image captions and the data-description attribute for more details about your images. By default, the plugin automatically generates thumbnails from the original images, however, you're allowed to use data-large-src attribute to specify the large version of your image.

How to use it:

1. Include the jQuery PgwSlider's stylesheet file in the header of the page.

<link href="pgwslider.css" rel="stylesheet" type="text/css">

2. Include jQuery javascript library and the jQuery PgwSlider's script at the end of the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="pgwslider.js"></script>

3. Create the image slideshow using Html unordered list.

<ul class="pgwSlider">
<li><img src="1.jpg" alt="Alt 1" data-large-src="1x2.jpg" data-description="More Description 1"></li>
<li><img src="2.jpg" alt="Alt 2" data-large-src="2x2.jpg" data-description="More Description 2"></li>
<li><img src="3.jpg" alt="Alt 3" data-large-src="3x2.jpg" data-description="More Description 3"></span>
</ul>

4. Call the plugin on Document Ready.

<script>
$(document).ready(function() {
    $('.pgwSlider').pgwSlider();
});
</script>

5. Options and defaults.

• mainClassName : 'pgwSlider': This option overrides the default CSS class of the slider.
• listPosition : 'right': To choose the position of the list, you can set this option to "left" or "right".
• selectionMode : 'click': This option sets the selection mode of the current element, it can be set to "click" or "mouseOver".
• autoSlide : true: enable the automatic transition between the images.
• transitionEffect : 'fading': You can choose between 2 different transition effects: "fading" or "sliding".
• displayList : true: This option displays or not the list of the slider elements. To choose the position, see the option "listPosition".
• displayControls : false: On the main container, this option sets a button on each side to display the previous or next image.
• touchControls : true: If this parameter is activated, the main container binds the touch movements and displays the previous or next slide. Only the mobile devices send these events.
• verticalCentering : false: If the height of the list or the main container is smaller than the height of the image, this option can vertically center the element. To activate, this option must be set to "true".
• beforeSlide : null: This option may contain a function that will be called before each new slide. For example: "function() { console.log('before'); }"
• afterSlide : null: In the same way as beforeSlide, afterSlide can be called after each slide. For example: "function() { console.log('after'); }"
• maxHeight : null: If you want to set a maximum height to your slider, you can be set this option with a number in pixels (without the suffix "px").
• adaptiveHeight : false: If your images have a different height, this option adjusts automatically the global height of the slider. 
• adaptiveDuration : 200: This duration is the period in milliseconds, during the adjustment of the previous option runs (if it is activated). 
• transitionDuration : 600: The period of animation in milliseconds between 2 images.
• intervalDuration : 3000: The interval in milliseconds before the displaying of the next image. This option requires the "autoSlide" option activated.

Change log:

v2.3.0 (2014-09-22)

• Minor fixes

v2.2.0 (2014-09-10)

• Minor fixes

v2.0.1 (2014-09-08)

• 4 new functionalities: "transitionEffect", "displayList", "displayControls" and "touchControls".

v2.0.0 (2014-09-05)

• Refactoring HTML and CSS.
• Improved compatibility for IE8.
• 6 new functionalities: "listPosition", "selectionMode", "verticalCentering", "beforeSlide", "afterSlide" and "maxHeight".

v1.4.0 (2014-08-01)

• Optimization of animation transition (Version 1.4)

v1.3.0 (2014-07-02)

• Fix for Zepto

v1.2.2 (2014-05-31)

• Update Slider CSS

v1.2 (2014-05-09)

• Slider API with 9 new functions

---

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