пропадает контент из карусели javaScript

Question

При загрузке сайта карусель появляется, но после нажатия на кнопку анимация проигрывается, при этом контент в карусели хорошо видно, но как только анимация заканчивается контент пропадает, на его месте остаётся пустое место. Как можно решить эту проблему?

Код html:

<!DOCTYPE html>
<html lang="ru" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Астрология</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="../static/css/style.css" th:href="@{/css/style.css}"/>
  <link rel="icon" href="../static/img/logo.ico" type="image/x-icon" th:href="@{/img/logo.ico}">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script defer src="../static/js/carusel.js" th:src="@{/js/carusel.js}"></script>
</head>
<body>

<div class="container">
  <div class="con-sm-1">

<IMG class="avatar" src="../static/img/avatar.jpg" th:src="@{/img/avatar.jpg}" style="max-width:50%;">

<h1>Рада приветствовать !</h1>


<P class="Me">
  - Меня зовут Виктория<br>
  - Мне 23 года<br>
  - Разбираю натальные карты<br>
  - Веду блог об астрологии и ее влиянии на жизнь<br>
  - Помогаю прийти к вашему предназначению<br>
  - Научу любить себя и быть уверенной<br>
</P>


<!-- Slideshow container -->
<div class="slideshow-container">

  <!--
  Вкусно пахнет дизель и свистит турбина
  и на кочках прыгает рыжая кабина
  коробка ходит туго, но люблю я друга
  раздуваю пыль дорог на камазе турбо
  -->

  <div class="mySlides fade">
    <div class="card">
      <div class="con">
        <h4><b> Финансовый успех </b></h4>
        <div class="opisanie">
          <p>- Как правильно копить деньги, рекомендации по их хранению<br>
            - Что привлекает деньги<br>
            - Найм/фриланс/бизнес<br>
            - Выбор работы/специализации<br>
            - Персональный финансовый код<br>
            - Ваши финансовые установки<br>
            - Практика для избавления от финансовых установок<br>
            - Благоприятные периоды для решений финансовых вопросов<br></p>
        </div>
        <h3>Цена: 1490 руб.</h3>
      </div>
    </div>
  </div>

  <div class="mySlides fade">
    <div class="card">
      <div class="con">
        <h4><b>Предназначение</b></h4>
        <div class="opisanie">
          <p>- Задачи на эту жизнь <br>
            - Кармическая проверка<br>
            - Осознание «темных» сторон личности <br>
            - Опыт прошлой жизни<br></p>
        </div>

        <h3>Цена: 1490 руб.</h3>
      </div>
    </div>
  </div>

  <div class="mySlides fade">
    <div class="card">
      <div class="con">
        <h4><b>Личная жизнь</b></h4>
        <div class="opisanie">
          <p>- Архетип молодого человека (девушки)<br>
            - Архетип мужа (жены) и знакомство с ним (с ней)<br>
            - Отношения<br>
            - Образ брака<br>
            - Беременность<br>
            - Ваши действия для женской энергии<br>
            - Рекомендации по стилю</p>
        </div>
        <h3>Цена: 1490 руб.</h3>
      </div>
    </div>
  </div>

  <div class="mySlides fade">
    <div class="card">
      <div class="con">
        <h4><b>Полный разбор натальной карты</b></h4>
        <div class="opisanie">
          <p>- «Астропсихология»<br>
            - «Финансовый успех»<br>
            - «Предназначение»<br>
            - «Личная жизнь»<br>
            - Здоровье и кризисные ситуации<br>
            + Ваши личные вопросы</p>
        </div>

        <h3>Цена: 3390 руб.</h3>
      </div>
    </div>
  </div>

  <div class="mySlides fade">
    <div class="card">
      <div class="con">
        <h4><b>«1 + 1»</b></h4>
        <div class="opisanie">
          <p>- Характеристика мужчины<br>
            - Потребности и желания мужчины<br>
            - Анализ совместимости<br>
            - Взаимоотношения<br>
            - Действия для женской энергии<br></p>
        </div>

        <h3>Цена: 1490 руб.</h3>
      </div>
    </div>
  </div>

  <div class="mySlides fade">
    <div class="card">
      <div class="con">
        <h4><b>Формула года</b></h4>
        <div class="opisanie">
          <p>- Ежегодный прогноз<br>
            - Благоприятные периоды для планирования<br>
            - Компенсаторные действия<br>
            + Солнцезажигающие действия<br></p>
        </div>

        <h3>Цена: 1790 руб.</h3>
      </div>
    </div>
  </div>

  <div class="mySlides fade">
    <div class="card">
      <div class="con">
        <h4><b>Астропсихология</b></h4>
        <div class="opisanie">
          <p>Консультация заменяет поход к психологу, который может искать причины ваших сложностей несколько
            сессий.<br>
            - Портрет личности<br>
            - Установки и убеждения<br>
            - Отношения с социумом<br>
            - Зажигаем личность<br>
            - Правильно расслабляем эмоциональный фон<br>
            - Экологичные способы проработки агрессии<br></p>
        </div>
        <h3>Цена: 1290 руб.</h3>
      </div>
    </div>
  </div>

  <!-- Next and previous buttons -->
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<br>

<!-- The dots/circles -->
<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
  <span class="dot" onclick="currentSlide(4)"></span>
  <span class="dot" onclick="currentSlide(5)"></span>
  <span class="dot" onclick="currentSlide(6)"></span>
  <span class="dot" onclick="currentSlide(7)"></span>
</div>




  <div class="com-sn-7">
  <P class="Me">Связь со мной:</P>
    <a class="whatsapp" href="https://wa.me/79774125460" target="_top" aria-label="Я ден">

      <div class="jumbotron">
        <div class="row">

          <div class="col-sm-2">
            <img src="../static/img/whatsapp_icon_130788-photoaidcom-cropped.png" width="100" th:src="@{/img/whatsapp_icon_130788-photoaidcom-cropped.png}">
          </div>

          <div class="col-sm-1">
            <p>Whatsapp</p>
          </div>

        </div>
      </div>
    </a>

    <p></p>
    <a class="whatsapp" href="https://t.me/+79774125460" target="_top" aria-label="Я ден">
    <div class="jumbotron">
        <div class="row">
          <div class="col-sm-2">
            <img src="../static/img/teleLogo.png" width="100" th:src="@{/img/teleLogo.png}">
          </div>
         <div class="col-sm-1">
           <p>Telegram</p>
         </div>

        </div>
    </div>
    </a>
  </div>
  </div>



</div>


</body>
</html>

Код css:

body {
    background: #ECDACE
}

IMG.avatar {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
}


h1 {
    text-align: center;
    margin: 0 auto;
    font-size: 3.2rem;
    font-family: Brush Script MT, Brush Script Std, cursive;
}


p {
    font-family: Brush Script MT, Brush Script Std, cursive;
    font-size: 1.4rem;
}

P.Me {
    font-family: Brush Script MT, Brush Script Std, cursive;
    font-size: 1.4rem;
    margin-left: auto;
    margin-right: auto;
    width: 28em;
}


* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
    display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}


.jumbotron {
    border-radius: 3px 3px 3px 3px;
}







.card {
    background: #F7F1E4;
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    text-align: center;
    margin: 0 auto;
    border-top-right-radius: 80px;
    border-bottom-left-radius: 80px;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.con {
    padding: 2px 16px 35px;
    font-family: Brush Script MT, Brush Script Std, cursive;
    font-size: 1.4rem;
}

.opisanie {
    text-align: left;
    font-size: 1.4rem;
}


.about {
    background: #F7F1E4;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
    transition: 0.3s;
    margin: 0 auto;
    border-top-right-radius: 80px;
    border-bottom-left-radius: 80px;
    border-top-left-radius: 80px;
    border-bottom-right-radius: 80px;
}

.about-ico {
    padding: 20px 20px 20px 20px;
}

.what-im {
    border-radius: 50%;
    border-bottom-right-radius: 80px;
    display: block;
    float: left;
}

.what-txt {
    padding: 10px 30px 50px 20px;
    font-size: 1.4rem;
    display: block;
    float: left;
}

Код JavaScript:

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
}

.

БЛОГ НА HUSL

пропадает контент из карусели javaScript

Ответы (0 шт):