Example 5: Slider with Navigation
A simpler slider with the navigation actived.
HTML
<div class="rslides-wrapper">
<ul class="rslides" id="slider5">
<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>
</div>Unlike the previous examples, the main slider is wrapper in a div tag to easily style the pagination.
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 5
new responsiveSlides('#slider5', {
nav: true
});
});
</script>Add the setting nav to true to enable the navigation.
Find out more in the next examples or jump to the documentation