Example 1: Butterflies Simple Slider
3 pictures rotating every 5s. Every picture fade in 800ms.
HTML
<ul class="rslides" id="slider1">
<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/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/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">
<style>
#slider1 li {
transition-duration: 0.8s;
}
</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 1
new responsiveSlides('#slider1', { timeout: 5000 });
});
</script>Use the setting timeout in the javascript to modify the duration between 2 pictures.
Find out more in the next examples or jump to the documentation