Показать разные фрагменты слайда по клику

Question

Я пытаюсь использовать веб-слайды - https://github.com/webslides/WebSlides. Я не программист, но это выглядит потрясающе, и я хочу попробовать и использовать его.У меня есть вопрос о функциональности, которая может существовать, но я могу ее не видеть.Я смотрю, как показать разные части / фрагменты слайда одна за другой.Например, на вашем демонстрационном сайте слайды с 15 по 23 показывают разные текстовые фрагменты, расположенные в разных частях слайда, но виден только один фрагмент за раз.Что, если я хочу показать все эти фрагменты один за другим (при нажатии стрелки), чтобы в конце я увидел их все на одном слайде?Это похоже на раскрытие отдельных частей слайда по одному шагу за раз.Я думаю, кто-то так говорит, чтонн.объявление откройте этот слайд, но веб-слайды проще в использовании, поэтому, если бы вы могли объяснить мне, как я могу воссоздать эту функциональность, было бы здорово.в том же разделе, но я все еще показываю и то и другое одновременно, а не один за другим.

<section class="slide-top">
          <div class="wrap">
            <div class="content-left">
              <h4>1/9 left top</h4>
              <p>Put content wherever you want. Have less. Do more</p>
              <p><code>.slide-top and .content-left</code></p>
            </div>
          </div>

          <div class="wrap">
            <div class="content-right">
              <h4>1/9 right top</h4>
              <p>Put content wherever you want. Have less. Do more</p>
              <p><code>.slide-top and .content-right</code></p>
            </div>
          </div>
          <!-- .end .wrap -->
        </section>

Этот код дает мне два фрагмента, появляющихся одновременно

но я хочу одного за другим.Спасибо

Answer 1

Я не знал WebSlides, выглядит очень красиво.Вы ссылаетесь на эту демонстрационную страницу, я полагаю: https://webslides.tv/demos/components#slide=15

Эта часть примера построена следующим образом:

<section class="slide-top">
  <div class="wrap">
    <div class="content-left">
      <h3>1/9 left top</h3>
      <p>Put content wherever you want. Have less. Do more. Create beautiful solutions.</p>
      <p><code>.slide-top and .content-left</code></p>
    </div>
  </div>
  <!-- .end .wrap -->
</section>
<section class="slide-top">
  <div class="wrap">
    <div class="content-center">
      <h3>2/9 center top</h3>
      <p>Your story needs to be clear. A great lasting story is about everyone or it will not last. </p>
      <p><code>.slide-top and .content-center</code></p>
    </div>
  </div>
  <!-- .end .wrap -->
</section>
<section class="slide-top">
  <div class="wrap">
    <div class="content-right">
      <h3>3/9 right top</h3>
      <p>Your story needs to be short. Select words carefully, each one must convey a meaning.</p>
      <p><code>.slide-top and .content-right</code></p>
    </div>
  </div>
  <!-- .end .wrap -->
</section>

Как указано здесь, каждый <section> представляет собой отдельный слайд, поэтомуВ приведенном выше примере показаны разные слайды.

В основном вы дали ответ, это возможно в https://revealjs.com/ и называется Фрагменты (https://revealjs.com/#/fragments). Но WebSlides разработан, чтобы сделать его простым.

Я не знаю, есть ли встроенный способ делать то, что вы хотите, но быстрое и грязное решение - копирование-вставка: вы используете первый элемент на первом слайде, первый и второйэлемент на втором слайде, первый и второй и третий элемент на третьем слайде. Поэтому вам придется редактировать фрагменты n раз. Это очень плохое дублирование, и чтобы избежать этого, вы должны сделатьнемного программирования - или используйте reve.js . Но, это работает в определенной степени:

<section class="slide-top">
  <div class="wrap">
    <div class="content-left">
      <h3>1/9 left top</h3>
      <p>Put content wherever you want. Have less. Do more. Create beautiful solutions.</p>
      <p><code>.slide-top and .content-left</code></p>
    </div>
  </div>
  <!-- .end .wrap -->
</section>
<section class="slide-top">
  <div class="wrap">
    <div class="content-left">
      <h3>1/9 left top</h3>
      <p>Put content wherever you want. Have less. Do more. Create beautiful solutions.</p>
      <p><code>.slide-top and .content-left</code></p>
    </div>
  </div>
  <!-- .end .wrap -->
  <div class="wrap">
    <div class="content-center">
      <h3>2/9 center top</h3>
      <p>Your story needs to be clear. A great lasting story is about everyone or it will not last. </p>
      <p><code>.slide-top and .content-center</code></p>
    </div>
  </div>
  <!-- .end .wrap -->
</section>
<section class="slide-top">
  <div class="wrap">
    <div class="content-left">
      <h3>1/9 left top</h3>
      <p>Put content wherever you want. Have less. Do more. Create beautiful solutions.</p>
      <p><code>.slide-top and .content-left</code></p>
    </div>
  </div>
  <!-- .end .wrap -->
  <div class="wrap">
    <div class="content-center">
      <h3>2/9 center top</h3>
      <p>Your story needs to be clear. A great lasting story is about everyone or it will not last. </p>
      <p><code>.slide-top and .content-center</code></p>
    </div>
  </div>
  <!-- .end .wrap -->
  <div class="wrap">
    <div class="content-right">
      <h3>3/9 right top</h3>
      <p>Your story needs to be short. Select words carefully, each one must convey a meaning.</p>
      <p><code>.slide-top and .content-right</code></p>
    </div>
  </div>
  <!-- .end .wrap -->
</section>