Заменить один блок на другой

Question

Это адаптивная версия, но все, что мне нужно, это просто заменить блок текста на другой через несколько секунд

У меня есть 4 блока текстов.Мне нужно увидеть один блок в адаптивной версии, который заменит секунду другим блоком текста.У вас есть идеи, как я могу это сделать?Пожалуйста, помогите ..

Вот мой HTML:

  <div class="div-wrap">
      <div class="div-wrap-txt">
        <div class="div-txt" style="padding-right: 35px;">
          <p class="label">Connt</p>
          <p style="color: #6B7684;">shoulders, turn<br> on it and connect application <br>with device.</p>
        </div>
        <div class="div-txt" style="padding-right: 35px; margin-top: 50px;">
          <p class="label">Calib</p>
          <p style="color: #6B7684;">calibration to help device remember your upright and slouch positions.</p>
        </div>
      </div>
      <div class="div-img">
      </div>
      <div class="div-wrap-txt">
        <div class="div-txt" style="text-align: left; padding-left: 25px;">
          <p class="label">Train</p>
          <p style="color: #6B7684;">posture anytime you want, <br>set up daily goal to improve gradually <br>your posture.</p>
        </div>
        <div class="div-txt" style="text-align: left; padding-left: 25px; margin-top: 50px;">
          <p class="label">Anale</p>
          <p style="color: #6B7684;">Statistics let track the <br>progress you’ve made from first <br>training to the last.</p>
        </div>
      </div>
     </div>

CSS:

  .div-img img {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  transform: translateX(-50%);
  opacity: 0;
  animation-duration: calc(var(--time) * 1s);
  animation-iteration-count: infinite;
  animation-name: fade;
}

.div-img img:nth-child(1) {
  animation-delay: 0s;
}

.div-img img:nth-child(2) {
  animation-delay: calc(var(--time) / 8 * 1s);
}

.div-img img:nth-child(3) {
  animation-delay: calc(var(--time) / 4 * 1s);
}

.div-img img:nth-child(4) {
  animation-delay: calc(var(--time) / 2.66 * 1s);
}

.div-img img:nth-child(5) {
  animation-delay: calc(var(--time) / 2 * 1s);
}

.div-img img:nth-child(6) {
  animation-delay: calc(var(--time) / 1.6 * 1s);
}

.div-img img:nth-child(7) {
  animation-delay: calc(var(--time) / 1.33 * 1s);
}

.div-img img:nth-child(8) {
  animation-delay: calc(var(--time) / 1.14 * 1s);
}

.div-txt {
  animation-duration: calc(var(--time) * 1s);
  animation-iteration-count: infinite;
  animation-name: color-change;
  text-align: right;
}

@keyframes color-change {
  0%,
  25%,
  100% {
    background-color: #fff;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
  }
  1%,
  24% {
    box-shadow: 0 10px 90px rgba(0, 0, 0, 0.4);
  }
}

@keyframes fade {
  0%,
  20%,
  100% {
    opacity: 0;
    z-index: auto;
  }
  1%,
  99% {
    z-index: 1;
  }
  8%,
  12% {
    opacity: 1;
  }
}

@media all and (min-width: 1170px) {
  .div-wrap {
    flex-flow: row nowrap;
    justify-content: space-around;
  }

Я прочитал, что могу использовать код JavaScript и JQuery, но я нене знаю как

Answer 1

Если я правильно понимаю, вы хотите спрятать один блок, а затем показать другой?Это в зависимости от размера экрана?

Добавить класс на предметы, чтобы показать на мобильном телефоне.Добавьте другой класс к элементам, которые будут отображаться на рабочем столе.

На мобильном устройстве добавьте отображение: ни один на рабочем столе класса.С рабочего стола (например, 1170 пикселей) установите отображение: нет на мобильном классе.И добавьте display: block (или flex, или ...) в класс рабочего стола.

.div-img img {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  transform: translateX(-50%);
  opacity: 0;
  animation-duration: calc(var(--time) * 1s);
  animation-iteration-count: infinite;
  animation-name: fade;
}

.div-img img:nth-child(1) {
  animation-delay: 0s;
}

.div-img img:nth-child(2) {
  animation-delay: calc(var(--time) / 8 * 1s);
}

.div-img img:nth-child(3) {
  animation-delay: calc(var(--time) / 4 * 1s);
}

.div-img img:nth-child(4) {
  animation-delay: calc(var(--time) / 2.66 * 1s);
}

.div-img img:nth-child(5) {
  animation-delay: calc(var(--time) / 2 * 1s);
}

.div-img img:nth-child(6) {
  animation-delay: calc(var(--time) / 1.6 * 1s);
}

.div-img img:nth-child(7) {
  animation-delay: calc(var(--time) / 1.33 * 1s);
}

.div-img img:nth-child(8) {
  animation-delay: calc(var(--time) / 1.14 * 1s);
}

.div-txt {
  animation-duration: calc(var(--time) * 1s);
  animation-iteration-count: infinite;
  animation-name: color-change;
  text-align: right;
}

@keyframes color-change {
  0%,
  25%,
  100% {
    background-color: #fff;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
  }
  1%,
  24% {
    box-shadow: 0 10px 90px rgba(0, 0, 0, 0.4);
  }
}

@keyframes fade {
  0%,
  20%,
  100% {
    opacity: 0;
    z-index: auto;
  }
  1%,
  99% {
    z-index: 1;
  }
  8%,
  12% {
    opacity: 1;
  }
}

@media all and (min-width: 1170px) {
  .div-wrap {
    flex-flow: row nowrap;
    justify-content: space-around;
  }
}

.block-desktop {
  display: none;
}

@media all and (min-width: 1170px) {
  .block-mobile {
    display: none;
  }

  .block-desktop {
    display: block;
  }
}

 <div class="div-wrap">
      <div class="div-wrap-txt block-mobile">
        <div class="div-txt" style="padding-right: 35px;">
          <p class="label">Connt</p>
          <p style="color: #6B7684;">shoulders, turn<br> on it and connect application <br>with device.</p>
        </div>
        <div class="div-txt" style="padding-right: 35px; margin-top: 50px;">
          <p class="label">Calib</p>
          <p style="color: #6B7684;">calibration to help device remember your upright and slouch positions.</p>
        </div>
      </div>
      <div class="div-img">
      </div>
      <div class="div-wrap-txt block-desktop">
        <div class="div-txt" style="text-align: left; padding-left: 25px;">
          <p class="label">Train</p>
          <p style="color: #6B7684;">posture anytime you want, <br>set up daily goal to improve gradually <br>your posture.</p>
        </div>
        <div class="div-txt" style="text-align: left; padding-left: 25px; margin-top: 50px;">
          <p class="label">Anale</p>
          <p style="color: #6B7684;">Statistics let track the <br>progress you’ve made from first <br>training to the last.</p>
        </div>
      </div>
     </div>