Question

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

我试过把两个相似的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>

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

1 个答案: