Example 2: Sakura Dynamic Slider
3 pictures rotating every 6s. Every picture fade in 1s and is loaded on demand using the svg placeholder technic.
HTML
<ul class="rslides" id="slider2">
<li class="rslide-active">
<a href="https://www.pexels.com/photo/17316196/" target="_blank">
<img src="images/4.jpg" width="800" height="400" alt="">
</a>
</li>
<li>
<a href="https://www.pexels.com/photo/17316256/" target="_blank">
<img data-src="images/5.jpg" class="placeholder" src="data:image/svg+xml;utf-8,%3Csvg width='800' height='400' viewBox='0 0 800 400' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E" width="800" height="400" alt="">
</a>
</li>
<li>
<a href="https://www.pexels.com/photo/17316195/" target="_blank">
<img data-src="images/6.jpg" class="placeholder" src="data:image/svg+xml;utf-8,%3Csvg width='800' height='400' viewBox='0 0 800 400' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E" width="800" height="400" alt="">
</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>
#slider2 li {
transition-duration: 1s;
}
</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 2
new responsiveSlides('#slider2', {
timeout: 6000,
before: function( slideIndex ) {
if ( window.console && window.console.log ) {
window.console.log( 'Before callback event fired. Coming picture index: ' + slideIndex );
}
var mySlides = document.querySelectorAll( '#slider2 li' ) || false;
if ( ! mySlides || ! mySlides[ slideIndex ] || /is-loaded/.test( mySlides[ slideIndex ].className || '' ) ) {
return false;
}
var nextSlideImgs = mySlides[ slideIndex ].getElementsByTagName( 'img' );
if ( ! nextSlideImgs || ! nextSlideImgs.length ) {
return false;
}
var nextSlideImg = nextSlideImgs[ 0 ];
if ( nextSlideImg && /placeholder/.test( nextSlideImg.className || '' ) ) {
nextSlideImg.setAttribute( 'src', nextSlideImg.getAttribute( 'data-src' ) );
nextSlideImg.removeAttribute( 'data-src' );
nextSlideImg.className = nextSlideImg.className.replace( 'placeholder', '' );
}
mySlides[ slideIndex ].className += ' is-loaded';
}
});
});
</script>Use the setting timeout in the javascript to modify the duration between 2 pictures. Timeout is the interval to trigger the display of each slide, in this example 5 seconds.
But designers often want exactly 5 seconds between the end of the current animation and the start of the next one, you need to add the fade duration as well, 1 second, so the timeout need to be set at 6000.
Find out more in the next examples or jump to the documentation