javascript - 单击时显示幻灯片的不同片段

Question

我正在尝试使用网络幻灯片 - https://github.com/webslides/WebSlides .我不是编码员，但这看起来很棒，我想尝试使用它。我对可能存在的功能有疑问，但我可能看不到它。我正在寻找如何一个接一个地显示幻灯片的不同部分/片段。例如，在您的演示网站上，从 15 到 23 的幻灯片显示了位于幻灯片不同部分的不同文本片段，但一次只能看到一个片段。如果我想一个一个地显示所有这些片段(点击箭头)，那么最后我会在同一张幻灯片上看到所有这些片段怎么办？这就像一次显示幻灯片的各个部分。我认为 reveal.js 将其称为碎片化幻灯片，但网页幻灯片更易于使用，因此如果您能向我解释如何重新创建此功能，那就太好了。

我试过将两个相似的 div 放在同一个部分，但我仍然同时显示，而不是一个接一个地显示。

<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/并称为 Fragments ( https://revealjs.com/#/fragments )。但 WebSlides 旨在保持简单。

我不知道是否有内置的方法来做你想做的事，但快速而肮脏的解决方案是复制粘贴:你在第一张幻灯片上使用第一个元素，在第二张幻灯片，第三张幻灯片上的第一个、第二个和第三个元素。因此，您必须编辑片段 n 次。这是非常糟糕的重复，要避免这种情况，您必须进行一些编程 - 或者使用 reveal.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>