这个幻灯片有什么问题？

Question

我试图制作图片幻灯片，但每次尝试都失败了。这是一个jsfiddlelink。您可能会注意到图片下方的黑色方块，我不知道如何删除它，如果我尝试删除，整个幻灯片将停止工作。此外，这就是它在我的 html 中的样子：

...

HTML代码：

<div id="section1">
  <div class="content">
    <div class="sheet">
      <h1> Latest.</h1>
      <hr/>
      <div class="bss-slides demo1" tabindex="1" autofocus="autofocus">
        <figure>
          <img src="http://leemark.github.io/better-simple-slideshow/demo/img/medium.jpg" width="100%" />
          <figcaption>"Medium" by <a href="https://www.flickr.com/photos/thomashawk/14586158819/">Thomas Hawk</a>.</figcaption>
        </figure>
        <figure>
          <img src="http://leemark.github.io/better-simple-slideshow/demo/img/colorado.jpg" width="100%" />
          <figcaption>"Colorado" by <a href="https://www.flickr.com/photos/stuckincustoms/88370744">Trey Ratcliff</a>.</figcaption>
        </figure>
        <figure>
          <img src="http://leemark.github.io/better-simple-slideshow/demo/img/monte-vista.jpg" width="100%" />
          <figcaption>"Early Morning at the Monte Vista Wildlife Refuge, Colorado" by <a href="https://www.flickr.com/photos/davesoldano/8572429635">Dave Soldano</a>.</figcaption>
        </figure>
        <figure>
          <img src="http://leemark.github.io/better-simple-slideshow/demo/img/sunrise.jpg" width="100%" />
          <figcaption>"Sunrise in Eastern Colorado" by <a href="https://www.flickr.com/photos/35528040@N04/6673031153">Pam Morris</a>.</figcaption>
        </figure>
        <figure>
          <img src="http://leemark.github.io/better-simple-slideshow/demo/img/colorado-colors.jpg" width="100%" />
          <figcaption>"colorado colors" by <a href="https://www.flickr.com/photos/cptspock/2857543585">Jasen Miller</a>.</figcaption>
        </figure>
      </div>
      <!-- // bss-slides -->
    </div>
  </div>
</div>

提前致谢。

Answer 1

出现黑色背景是因为 .bss 幻灯片 class 的背景属性。删除背景。然后对齐图片。

Answer 2

这有帮助吗？

/* if you want */
.bss-slides {
    background: transparent;
}
/* align slides with container */
.bss-slides figure {
    margin: 0;
}
/* button on top of it */
.bss-fullscreen { 
    z-index: 99;
}

这个幻灯片有什么问题？

What is wrong with this slideshow?

html

css

jquery

animation

slideshow