JS Tutorial
Download
Demo
- Overview
- Documents
User Rating: 3.1/5 ( 4 votes)
Your Rating:
PgwSlider - Responsive slider for jQuery / Zepto
- Fully responsive slider
- Less than 2.5 KB (minified and gzipped)
- All browsers support (desktop and mobile devices)
- SEO compliant
1 INCLUDE CSS AND JS FILES
<link href="/pgwslider.css" rel="stylesheet"> <script src="/jquery.min.js"></script> <script src="/pgwslider.js"></script>
2. 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>
3. JAVASCRIPT
$(document).ready(function() {
$('.pgwSlider').pgwSlider();
});
4. OPTIONS
autoSlide - Enable or disable automatic transition between the images. (Defaults to true)
autoSlide: true | false
adaptiveHeight - If your images have a different height, this option adjusts automatically the global height of the slider. (Defaults to false)
adaptiveHeight: true | false
adaptiveDuration - This duration is the period in milliseconds, during the adjustment of the previous option runs (if it is activated). (Defaults to 400)
adaptiveDuration: 400
transitionDuration - Period of animation in milliseconds between 2 images. (Defaults to 400)
transitionDuration: 400
intervalDuration - Interval in milliseconds before displaying of the next image. This option requires "autoSlide" option activated. (Defaults to 3000)
intervalDuration: 3000
5. IMAGE
Each image must be placed in a <li> tag. By default, this image will be used in the right 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 on the displaying of the current element. (See the first image in our example)
data-large-src - If you want to load a small image for the list, and a bigger for the displaying in the left side, you can add a "data-large-src" parameter to your <image> tag. (See the second image in our example)
6. 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)
7. 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 left side, not in the right list. (See the fourth image in our example)
