1

我使用 Owl Carousel 作为我主页的滑块，但我想在滑块的图像部分周围放置一个边框。如果我在整个 owl-theme 类周围放置一个图像，它也会将它放在 next 和 prev 按钮周围。

我还尝试将边框放在自动生成的“owl-wrapper-outer”类周围，但最终将边框放在容器内的图像周围，一旦滚动到左侧，左侧边框将与图像保持一致。
这是检查器中显示的代码：

<div id="owl-demo" class="owl-carousel owl-theme" style="display: block; opacity: 1;">
<div class="owl-wrapper-outer">
    <div class="owl-wrapper" style="width: 4206px; left: 0px; display: block;">
        <div class="owl-item" style="width: 701px;">
            <div class="item">
                <img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg" alt="The Last of us">
            </div>
        </div>
        <div class="owl-item" style="width: 701px;">
            <div class="item">
                <img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage2.jpg" alt="GTA V">
            </div>
        </div>
        <div class="owl-item" style="width: 701px;">
            <div class="item">
                <img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage3.jpg" alt="Mirror Edge">
            </div>
        </div>
    </div>
</div>
<div class="owl-controls clickable">
    <div class="owl-pagination">
        <div class="owl-page active"><span class=""></span>
        </div>
        <div class="owl-page"><span class=""></span>
        </div>
        <div class="owl-page"><span class=""></span>
        </div>
    </div>
    <div class="owl-buttons">
        <div class="owl-prev">prev</div>
        <div class="owl-next">next</div>
    </div>
</div>

这是一个jsfiddle，基本上是我页面上的内容，我试图在图像部分周围设置边框，但不是“下一个”和“上一个”按钮。

http://jsfiddle.net/mX455/6/

4

2 回答 2

0

这不是边界问题，因为边界正在按预期工作。这是一个填充问题。

允许图像流过填充。

您需要做的是更新它，使其同时使用边框和实心框阴影。

.owl-wrapper-outer {
    border: 8px solid red;
    box-shadow: 0px 0px 0px 10px #888888;
    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
}

JSFiddle

于 2014-06-06T17:18:47.543 回答
0

JSFiddle：它不适用于“插入”阴影。

于 2014-09-25T12:18:16.043 回答