Example 3: High-Resolution Images with Captions
HTML
<div class="rslides" id="slider3" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemscope itemtype="http://schema.org/ImageObject">
<a href="./images/7_large.jpg" itemprop="contentUrl">
<picture>
<source srcset="./images/7_large.webp" type="image/webp" media="(min-width: 800px)" />
<source srcset="./images/7_large.jpg" type="image/jpg" media="(min-width: 800px)" />
<source srcset="./images/7.webp" type="image/webp" media="(max-width: 799px)" />
<source srcset="./images/7.jpg" type="image/jpg" media="(max-width: 799px)" />
<img src="./images/7.jpg" width="800" height="400" itemprop="thumbnail" alt="Stones" />
</picture>
</a>
<figcaption itemprop="caption description">Stones in an empty dry river during a hot summer</figcaption>
</figure>
<figure itemscope itemtype="http://schema.org/ImageObject">
<a href="./images/8_large.jpg" itemprop="contentUrl">
<picture>
<source srcset="./images/8_large.webp" type="image/webp" media="(min-width: 800px)" />
<source srcset="./images/8_large.jpg" type="image/jpg" media="(min-width: 800px)" />
<source srcset="./images/8.webp" type="image/webp" media="(max-width: 799px)" />
<source srcset="./images/8.jpg" type="image/jpg" media="(max-width: 799px)" />
<img src="./images/8.jpg" width="800" height="400" itemprop="thumbnail" alt="Grass" />
</picture>
</a>
<figcaption itemprop="caption description">Wild grass somewhere in the wood during a sweat spring</figcaption>
</figure>
<figure itemscope itemtype="http://schema.org/ImageObject">
<a href="./images/9_large.jpg" itemprop="contentUrl">
<picture>
<source srcset="./images/9_large.webp" type="image/webp" media="(min-width: 800px)" />
<source srcset="./images/9_large.jpg" type="image/jpg" media="(min-width: 800px)" />
<source srcset="./images/9.webp" type="image/webp" media="(max-width: 799px)" />
<source srcset="./images/9.jpg" type="image/jpg" media="(max-width: 799px)" />
<img src="./images/9.jpg" width="800" height="400" itemprop="thumbnail" alt="Water" />
</picture>
</a>
<figcaption itemprop="caption description">Sun reflected in the pool water just before the autumn</figcaption>
</figure>
</div>CSS
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/peter-power-594/ResponsiveSlides.js@2.2.2/dist/css/responsiveslides.min.css">
<style>
#slider3 figcaption {
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 1em 2em;
background-color: rgba(0, 0, 0, 0.65);
color: #fff;
line-height: 1.3;
text-align: left;
}
</style>Set the fade duration through the stylesheet as classic transitions.
JS
<script src="https://cdn.jsdelivr.net/gh/peter-power-594/ResponsiveSlides.js@2.2.2/dist/js/responsiveslides.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Slideshow 3
new responsiveSlides( '#slider3' );
});
</script>Default settings used.
Find out more in the next examples or jump to the documentation