这个幻灯片有什么问题？

Question

我正在尝试进行图片幻灯片放映，但每次尝试都失败了。这是一个jsfiddle链接。您可能会注意到图片下面的黑色方块，我不知道如何删除它，如果我尝试删除，整个幻灯片将停止工作。另外，这是我在html中看起来的样子：

...

HTML代码：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

提前致谢。

Answer 1

由于.bss-slides类的背景属性，黑色背景出现了。删除背景。而不是对齐图片。

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;
}