Question

我正在尝试自定义bxslider，一个流行的js carousel插件，下面是我想让它看起来像：

drop shadow and caption for each image

我要添加的内容是每个图像的阴影和底部下方的标题。截至目前我已经编辑了一些css来删除默认的bxslider样式，如边框和东西。

FIDDLE HERE （这是我迄今为止所能实现的目标。）

当然，如果你想要做的就是为图像添加一个盒子阴影，你可以轻松地做到这一点，例如::

<ul class="bxslider fade out">
          <li><img src="img/bp-1.jpg" /></li>
</ul>

CSS ::

           .bxslider {
              margin: 0;
              padding: 0;
            }

            .bxslider li {
              position: relative;
              display: table;
            }

            .bxslider li:after {
              content: '';
              height: 5px;
              width: 90%;
              position: absolute;
              bottom:5px;
              left: 50%;
              -webkit-transform: translateX(-50%);
              -ms-transform: translateX(-50%);
              -o-transform: translateX(-50%);
              transform: translateX(-50%);
              -webkit-box-shadow: 0px 2px 15px rgba(0,0,0,.7);
              box-shadow: 0px 2px 15px rgba(0,0,0,.7);
              z-index: -1;
              background: rgba(0,0,0,.2);
            }

            .bxslider li img {
              width: 100%;
              max-width: 300px;
            }

P.S。我需要使用伪元素，因为box-shadow不能是img's宽度的100％。

但是在bx-slider中为图像添加框阴影是一个挑战，这就是为什么::

bx-slider添加了一个名为bx-viewport的类，其中包含以下css overflow: hidden;，因此永远不会看到框阴影。如果你删除溢出：隐藏，你会看到阴影，但旋转木马将无法正常工作，隐藏的幻灯片将显示，你的页面将获得一个水平滚动条（不是我想要的）。

好的，所以我给了你背景幕，我的问题非常简单，我只想在幻灯片中为图片添加box-shadow，你可以使用 FIDDLE 进行实验。

那我该如何做呢？

Answer 1

您可以在JSFiddle上查看我的方法。我使用H3添加了标题。

<li>
  <div class="img-wrapper">
     <img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
  </div>
  <h3>X1 UNFOLDED</h3>
</li>

Answer 2

只需包装图像并将box-shadow应用于该包装器。还要为trace_printf("txt_str=%s",TXT_STRINGS[VERSIYON][Dil]);添加额外的填充。 JsFiddle Link

<强> HTML：

.bxslider > li

<强> CSS：

<ul class="bxslider">
    <li>
        <div class="img-wrapper">
            <img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
        </div>
    </li>
</ul>

同样在此包装器中，您可以为图像添加标题。 bx-slider只是从.bxslider > li { padding-bottom: 20px; } .img-wrapper:after { content:''; height: 5px; width: 90%; position: absolute; bottom:5px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); -webkit-box-shadow: 0px 2px 15px rgba(0, 0, 0, .7); box-shadow: 0px 2px 15px rgba(0, 0, 0, .7); z-index: -1; background: rgba(0, 0, 0, .2); }的子元素创建幻灯片。

Answer 3

你可以做的另一件事是向.bx-viewport容器添加高度，用CSS或javascript强制它。也许它不是最好的解决方案，但它可以解决问题。

Answer 4

这就是我在旋转木马图像中添加了一个盒子阴影的方式：

http://jsfiddle.net/Yq3RM/995/

.bx-viewport {
    padding: 3px; /* add space for box-shadow of image to show */
}
.bxslider img {
    box-shadow: 0 0 3px 0 #000;
}

在bx-slider中为图像添加框阴影

4 个答案: