[Lefseq]

Всем привет! Изложу суть.

На странице имеется 2 блока, первый при заходе на сайт выдает картинки с определенным интервалом времени, (от первой до третей, не по кругу, а именно от 1 до 3 (один раз)), второй блок в это время выдает блоки с текстом также с определенным интервалом времени. Но проблема в том, что когда обновляешь страницу, выдача блоков повторяется. Помогите с помощью куков сделать запоминание браузером пользователя, результат открытие всех блоков на странице. В общем, чтобы после обновления страницы, стояла картинка под номером, и были открытыми все текстовые блоки.

Код для блока с текстом:

<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>

.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%;
  }
}

Код картинок:

<div id="slider">
    <img src="" id="one">
    <img src="" id="two">
</div>

#slider{
    width: 100px;
    height: 100px;
    margin: 0px auto;
}
#slider > img{
    position: absolute;
    transition: 1s;
}

const viewImages = props => {
    let i = 0, elems = [two, one], timeout; one.src = props.img[0], two.src = props.img[1];
    const changeImg = () => {
        elems.reverse();
        elems[0].style.opacity = 1, elems[1].style.opacity = 0;
        setTimeout(()=> elems[1].src = props.img[i], props.speed * 1000 + 900);
        timeout = setTimeout(changeImg, props.speed * 1000);
        i == props.img.length - 1 ? (i = 0, clearTimeout(timeout)) : i++;
    }; changeImg();
}
 
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
});