PgwJS
Powered by Pagawa.com
Download | Example | Documentation

PgwSlider - Responsive slider for jQuery / Zepto

Download

Current version: 2.3
To download or fork this project, please visit our GitHub repository
And of course, you will need Jquery or Zepto to use this responsive slider plugin.
jquery zepto.js

Example

To test the adaptive slider, just resize your browser and/or configure some options, and see the result below:
 List:
 Transition effect:
 Selection mode:
 Display options:
To see all available options, click here.
HTML:
<ul class="pgwSlider">
    <li><img src="paris.jpg" alt="Paris, France" data-description="Eiffel Tower and Champ de Mars"></li>
    <li><img src="montreal_mini.jpg" alt="Montréal, QC, Canada" data-large-src="montreal.jpg"></li>
    <li>
        <img src="shanghai.jpg">
        <span>Shanghai, China</span>
    </li>
    <li>
        <a href="http://www.nyc.gov" target="_blank">
            <img src="new-york.jpg">
	    <span>New York, NY, USA</span>
        </a>
    </li>
</ul>
JavaScript:
$(document).ready(function() {
    $('.pgwSlider').pgwSlider();
});

Documentation

Slide components

This plugin is SEO compliant, so the statement of the slideshow elements is only via a HTML tag "<ul>" (see our example above).
If you wish, you can add one or more sliders on a same page.
Image
Each image must be placed in a <li> tag. By default, this image will be used in the list and to display the current element.
alt - This parameter defines the image title, it is used to display a caption on the image. (See the first image in our example)
data-description - This parameter adds a new text line in the caption of the selected element. (See the first image in our example)
data-large-src - If you want to load a small image in the list, and a bigger when this image will be selected, you can add a "data-large-src" parameter to your <image> tag. (See the second image in our example)
Title
To display a caption on the image, you can use the "alt" parameter on the <image> tag, but for SEO reasons, you might want to write the title out of this tag. For this, create a new <span> tag containing your title, in the same <li> tag. (See the third image in our example)
Link
If you want to create a link on your image, you can wrap the code contained in the <li> tag with a <a> tag (with or without a "target" parameter). The link will only appear on the main side, not in the list. (See the fourth image in our example)

Plugin options

You can add these options during the slider initialization to customize it.
Option name Type Default Description
mainClassName String 
'pgwSlider'
 This option overrides the default CSS class of the slider.
listPosition String 
'right'
 To choose the position of the list, you can set this option to "left" or "right". If you want to disable the displaying of the list, see the option "displayList".
selectionMode String 
'click'
 This option sets the selection mode of the current element, it can be set to "click" or "mouseOver". "mouveOver" is only active with the transition effect "fading".
transitionEffect String 
'fading'
 You can choose between 2 different transition effects: "fading" or "sliding".
autoSlide Boolean 
true
 Enable or disable the automatic transition between the images of the slider.
displayList Boolean 
true
 This option displays or not the list of the slider elements. To choose the position, see the option "listPosition".
displayControls Boolean 
false
 On the main container, this option sets a button on each side to display the previous or next image.
touchControls Boolean 
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 Boolean 
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".
adaptiveHeight Boolean 
false
 If your images have a different height, this option adjusts automatically the global height of the slider.
maxHeight Integer 
null
 If you want to set a maximum height to your slider, 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.

Slider API

To use these slider API functions, you must assign the initialization to a variable.
var pgwSlider = $('.pgwSlider').pgwSlider();
startSlide - Enables automatic sliding.
pgwSlider.startSlide();
stopSlide - Disables automatic sliding.
pgwSlider.stopSlide();
getCurrentSlide - Returns the current slide identifier.
pgwSlider.getCurrentSlide();
getSlideCount - Returns the total number of the slider elements.
pgwSlider.getSlideCount();
displaySlide - Displays the element selected by its identifier.
pgwSlider.displaySlide(3);
nextSlide - Displays the next element.
pgwSlider.nextSlide()
previousSlide - Displays the previous element.
pgwSlider.previousSlide();
destroy - Destroys the slider. If a parameter "true" is passed, the container will be only hidden for a possible reloading.
pgwSlider.destroy();
reload - Reloads the slider with new configuration options. For example:
pgwSlider.reload({
    maxHeight : 300,
    intervalDuration : 4000
});
jquery / zepto responsive slider - jquery / zepto responsive menu - jquery / zepto responsive modal / dialog - jquery / zepto cookie plugin