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.

Recent Post