Вы можете использовать sessionStorage, и запоминать, когда впервые зашёл пользователь...
<style>
.hide_block1 {
overflow: hidden;
animation: showDiv 4s forwards;
}
.hide_block2 {
overflow: hidden;
animation: showDiv 14s forwards;
}
.hide_block3 {
overflow: hidden;
animation: showDiv 25s forwards;
}
.hide_block4 {
overflow: hidden;
animation: showDiv 33s forwards;
}
.hide_block5 {
overflow: hidden;
animation: showDiv 42s forwards;
}
@keyframes showDiv {
0%, 99% {
height: 0px;
}
100% {
height: 100%;
}
}
</style>
<style id="customStyleSheet"></style>
<style>
#slider {
width: 100px;
height: 100px;
margin: 0px auto;
}
#slider > img {
position: absolute;
transition: 1s;
background-color: black;
}
</style>
<section id="slider">
<img id="one">
<img id="two">
</section>
<section>
<div class="hide_block1">Текст 1</div>
<div class="hide_block2">Текст 2</div>
<div class="hide_block3">Текст 3</div>
<div class="hide_block4">Текст 4</div>
<div class="hide_block5">Текст 5</div>
</section>
<script>
var startDate;
if("startDate" in sessionStorage) {
startDate = Number(sessionStorage.startDate);
} else {
startDate = Date.now();
sessionStorage.startDate = startDate.toString();
}
customStyleSheet.textContent = `
[class*=hide_block] {
animation-delay: -${Date.now() - startDate}ms;
}
`;
function viewImages({ img, speed }) {
var i = Math.floor((Date.now() - startDate) / 1000);
(function changeImg() {
one.src = img[clamp(i % 2 === 0 ? i : i - 1)];
two.src = img[clamp(i % 2 === 0 ? i - 1 : i )];
two.style.opacity = i % 2;
i++;
if(img.length > i) setTimeout(changeImg, 1000 * speed);
})();
function clamp(x) {
return x < 0 ? 0 : x >= img.length ? img.length - 1 : x;
}
}
viewImages({
img: [
'https://pp.userapi.com/c849416/v849416811/13d2f8/zPAXn4wkdbs.jpg',
'https://pp.userapi.com/c849416/v849416811/13d2f1/8i73jwgUPek.jpg',
'https://pp.userapi.com/c849416/v849416811/13d2ea/mM6hEHXbOkY.jpg'
],
speed: 2
});
</script>