JSFiddle - React, Tailwind, and code Playground
HTML
<div class="slideshow">
<div class="active">
<a href="http://jonraasch.com/blog/"><img src="https://sites.google.com/site/zbawicielzielonagora/o.jpg" width="610" alt="Slideshow Image 1" /></a>
ołtarz
</div>
<div>
<a href="http://jonraasch.com/blog/"><img src="https://sites.google.com/site/zbawicielzielonagora/o1.jpg" width="610" alt="Slideshow Image 2" /></a>
zbliżenie na ołtarz
</div>
<div>
<a href="http://jonraasch.com/blog/"><img src="https://sites.google.com/site/zbawicielzielonagora/f1.jpg" width="610" alt="Slideshow Image 3" /></a>
Matka Boża Fatimska
</div>
<div>
<a href="http://jonraasch.com/blog/"><img src="https://sites.google.com/site/zbawicielzielonagora/o2.jpg" width="610" alt="Slideshow Image 4" /></a>
ołtarz boczny z prawej strony nawy głównej
</div>
<div>
<a href="http://jonraasch.com/blog/"><img src="https://sites.google.com/site/zbawicielzielonagora/o3.jpg" width="610" alt="Slideshow Image 4" /></a>
oltarz boczny z lewej strony nawy głównej
</div>
</div>
CSS
.slideshow {
position:relative;
height:350px;
}
.slideshow div {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
height: 450px;
background-color: #fff1ca;
}
.slideshow div.active {
z-index:10;
opacity:1.0;
text-align: center;
}
.slideshow div.last-active {
z-index:9;
}
.slideshow div img {
width:610px;
display: block;
border: 0;
margin-bottom: 10px;
}
JavaScript
function slideSwitch() {
var $active = $('.slideshow div.active');
if ( $active.length == 0 ) $active = $('.slideshow div:last');
// use this to pull the divs in the order they appear in the markup
var $next = $active.next().length ? $active.next() : $('.slideshow div:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
};
$(document).ready(function()
{
setInterval(slideSwitch, 3000 );
});