<ul class="pgwSlideshow">
<li><img src="san-francisco.jpg" alt="San Francisco, USA" data-description="Golden Gate Bridge"></li>
<li><img src="rio.jpg" alt="Rio de Janeiro, Brazil"></li>
<li><img src="london_mini.jpg" alt="" data-large-src="london.jpg"></li>
<li><img src="new-york.jpg" alt=""></li>
<li><img src="new-delhi.jpg" alt=""></li>
<li><img src="paris.jpg" alt=""></li>
<li><img src="sydney.jpg" alt=""></li>
<li><img src="tokyo.jpg" alt=""></li>
<li><img src="honk-kong.jpg" alt=""></li>
<li><img src="dakar.jpg" alt=""></li>
<li><img src="toronto.jpg" alt=""></li>
<li>
<a href="http://en.wikipedia.org/wiki/Monaco" target="_blank">
<img src="monaco.jpg" alt="Monaco">
</a>
</li>
</ul>
$(document).ready(function() {
$('.pgwSlideshow').pgwSlideshow();
});
Option name | Type | Default | Description |
---|---|---|---|
mainClassName | String | 'pgwSlideshow' |
This option overrides the default CSS class of the slideshow. |
transitionEffect | String | 'sliding' |
2 transition effects are available: "sliding" or "fading". |
autoSlide | Boolean | false |
Enable or disable the automatic transition between the gallery images. |
beforeSlide | Function | false |
This option may contain a function that will be called before each new slide. For example: "function(id) { console.log('Before sliding - The current slide is ' + id); }" |
afterSlide | Function | false |
In the same way as beforeSlide, the function afterSlide can be called after each slide. For example: "function(id) { console.log('After sliding - The current slide is ' + id); }" |
displayList | Boolean | true |
This option displays or not the list of the carousel elements. |
displayControls | Boolean | true |
On the main container, this parameter sets a button on each side to display the previous or next image. |
touchControls | Boolean | true |
If this option is activated, the main container binds the touch movements and displays the previous or next slide. (Only the mobile devices send these events) |
maxHeight | Integer | null |
If you want to set a maximum height to your slideshow, you can set this option with a number in pixels (without the suffix "px"). |
adaptiveDuration | Integer | 200 |
This duration is the period in milliseconds, during the adjustment of the previous option runs (if it is activated). |
transitionDuration | Integer | 500 |
Period of animation in milliseconds between 2 images. |
intervalDuration | Integer | 3000 |
Interval in milliseconds before displaying of the next image. This option requires "autoSlide" option activated. |
var pgwSlideshow = $('.pgwSlideshow').pgwSlideshow();
pgwSlideshow.startSlide();
pgwSlideshow.stopSlide();
pgwSlideshow.getCurrentSlide();
pgwSlideshow.getSlideCount();
pgwSlideshow.displaySlide(3);
pgwSlideshow.nextSlide()
pgwSlideshow.previousSlide();
pgwSlideshow.destroy();
pgwSlideshow.reload({
transitionEffect : 'fading',
adaptiveDuration : 4000
});