Example 4: Slider with Pagination
A simpler slider with the pagination actived.
HTML
<ul class="rslides" id="slider4">
<li class="rslide-active">
<a href="https://www.pexels.com/photo/17188965/" target="_blank">
<img src="./images/1.jpg" width="800" height="400" alt="Butterfly on a leaf">
</a>
</li>
<li>
<a href="https://www.pexels.com/fr-fr/photo/17188967/" target="_blank">
<img src="./images/2.jpg" width="800" height="400" alt="Butterfly in a flower">
</a>
</li>
<li>
<a href="https://www.pexels.com/fr-fr/photo/17188966/" target="_blank">
<img src="./images/3.jpg" width="800" height="400" alt="Butterfly feeding">
</a>
</li>
</ul>CSS
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/peter-power-594/ResponsiveSlides.js@2.2.2/dist/css/responsiveslides.min.css">Default styles are used in the current example.
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 4
new responsiveSlides('#slider4', {
pager: true
});
});
</script>Add the setting pager to true to enable the pagination
Find out more in the next examples or jump to the documentation