our sponsors

PgwSlideshow - Responsive slideshow / gallery / carousel for jQuery / Zepto


I have introduced a lot of beautiful and free jquery slider in my previous post. In this post, we will be examining another one, it's PgwSlideShow, which is small and flexible, a good solution for both desktop and mobile.


PgwSlideShow helps developer to create slideshow easily and supports some good features, such as:

  • Fully responsive slideshow
  • Desktop and Mobile devices supported
  • Less than 4 KB (minified and gzipped)
  • Full customization with the CSS file included


1. Include Javascript & CSS

<script src='//'></script>
<script src=''></script>
<link rel='stylesheet' href=''>

2. Add your slideshow items in <ul>

<div class="slides">
    <ul class="pgwSlideshow">
        <li><img src="" alt="San Francisco, USA" data-description="Golden Gate Bridge">
        <li><img src="" alt="Rio de Janeiro, Brazil">
        <li><img src="" alt="" data-large-src="">
        <li><img src="" alt="">
        <li><img src="" alt="">
        <li><img src="" alt="">
        <li><img src="" alt="">
        <li><img src="" alt="">
        <li><img src="" alt="">
        <li><img src="" alt="">
        <li><img src="" alt="">
            <a href="" target="_blank"><img src="" alt="Monaco">

3. Adjust a little bit CSS for the ul to work

.slides {
  width: 700px;
  margin: 0 auto;

.slides ul {
  list-style: inside none disc;
  margin: 0;
  padding: 0;

4. Call PgwSlideshow

$(document).ready(function() {
      autoSlide: true


Option name Type Default Description
mainClassName String
This option overrides the default CSS class of the slideshow.
transitionEffect String
2 transition effects are available: "sliding" or "fading".
autoSlide Boolean
Enable or disable the automatic transition between the gallery images.
displayList Boolean
This option displays or not the list of the carousel elements.
displayControls Boolean
On the main container, this parameter sets a button on each side to display the previous or next image.
touchControls Boolean
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
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").
beforeSlide Function
This option may contain a function that will be called before each new slide. For example: "function() { console.log('before'); }"
afterSlide Function
In the same way as beforeSlide, the function afterSlide can be called after each slide. For example: "function() { console.log('after'); }"
adaptiveDuration Integer
This duration is the period in milliseconds, during the adjustment of the previous option runs (if it is activated).
transitionDuration Integer
Period of animation in milliseconds between 2 images.
intervalDuration Integer
Interval in milliseconds before displaying of the next image. This option requires "autoSlide" option activated.



See the Pen pgwSlideShow by Thanh Nguyen (@genievn) on CodePen.

slideshow  slider  jquery  plugin  responsive  mobile  effect  
comments powered by Disqus