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

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

INTRODUCTION

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

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

HOW TO USE

1. Include Javascript & CSS

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script src='https://cdn.rawgit.com/Pagawa/PgwSlideshow/master/pgwslideshow.min.js'></script>
<link rel='stylesheet' href='https://cdn.rawgit.com/Pagawa/PgwSlideshow/master/pgwslideshow.min.css'>

2. Add your slideshow items in <ul>

<div class="slides">
    <ul class="pgwSlideshow">
        <li><img src="http://s1c.pagawatic.com/img/pgwjs/slideshow/san-francisco.jpg" alt="San Francisco, USA" data-description="Golden Gate Bridge">
        </li>
        <li><img src="http://s1c.pagawatic.com/img/pgwjs/slideshow/rio.jpg" alt="Rio de Janeiro, Brazil">
        </li>
        <li><img src="http://s1c.pagawatic.com/img/pgwjs/slideshow/london_mini.jpg" alt="" data-large-src="http://s1c.pagawatic.com/img/pgwjs/slideshow/london.jpg">
        </li>
        <li><img src="http://s1c.pagawatic.com/img/pgwjs/slideshow/new-york.jpg" alt="">
        </li>
        <li><img src="http://s1c.pagawatic.com/img/pgwjs/slideshow/new-delhi.jpg" alt="">
        </li>
        <li><img src="http://s1c.pagawatic.com/img/pgwjs/slideshow/paris.jpg" alt="">
        </li>
        <li><img src="http://s1c.pagawatic.com/img/pgwjs/slideshow/sydney.jpg" alt="">
        </li>
        <li><img src="http://s1c.pagawatic.com/img/pgwjs/slideshow/tokyo.jpg" alt="">
        </li>
        <li><img src="http://s1c.pagawatic.com/img/pgwjs/slideshow/honk-kong.jpg" alt="">
        </li>
        <li><img src="http://s1c.pagawatic.com/img/pgwjs/slideshow/dakar.jpg" alt="">
        </li>
        <li><img src="http://s1c.pagawatic.com/img/pgwjs/slideshow/toronto.jpg" alt="">
        </li>
        <li>
            <a href="http://en.wikipedia.org/wiki/Monaco" target="_blank"><img src="http://s1c.pagawatic.com/img/pgwjs/slideshow/monaco.jpg" alt="Monaco">
            </a>
        </li>
    </ul>
</div>

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() {
    $('.pgwSlideshow').pgwSlideshow({
      autoSlide: true
    });
});

OPTIONS

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.
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").
beforeSlide Function
null
This option may contain a function that will be called before each new slide. For example: "function() { console.log('before'); }"
afterSlide Function
null
In the same way as beforeSlide, the function afterSlide can be called after each slide. For example: "function() { console.log('after'); }"
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.

DEMO

 

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