有什么方法可以在 jssor 滑块中为图像添加框阴影？

Question

我用 Jssor 创建了一个 slider/slideshow。理想情况下，我希望每张图片下方都有一个阴影。我在我的 img 样式中添加了一个框阴影，但阴影只出现在一些图像上，即使那样，也只出现在一侧。我也试过添加边框，但它只出现在 3 个边上（缺失的边缘取决于图像是纵向还是横向）。如果我为我的标签设置样式，当然缩略图也会得到样式，并且所有缩略图都有显示阴影的类似问题。

这是 css（如果我没有正确使用它，我深表歉意，我是新来的！）

img {
    padding:0px;
    margin:0px;
    border:medium solid black;
    box-shadow: 10px 10px 5px #888;
}

TIA 罗布

Answer 1

你可以在图片上留下样式，但只有大的才会这样，#编辑使图片周围有阴影

img[width="150"]{
    padding:0px;
    margin:10px;
    border:medium solid black;
    box-shadow: 10px 10px 5px #888, -10px -10px 5px #888,-10px 10px 5px #888, 10px -10px 5px #888;
}

<img width="150" height="150" src="http://lorempixel.com/200/200/sports/1"/>
<img width="150" height="150" src="http://lorempixel.com/200/200/sports/1"/>
<img width="150" height="150" src="http://lorempixel.com/200/200/sports/1"/>
<img width="60" height="60" src="http://lorempixel.com/200/200/sports/1"/>
<img width="60" height="60" src="http://lorempixel.com/200/200/sports/1"/>
<img width="60" height="60" src="http://lorempixel.com/200/200/sports/1"/>

Answer 2

<style>
    .shadow {
        padding:0px;
        margin:0px;
        border:medium solid black;
        box-shadow: 10px 10px 5px #888;
    }

</style>


<script>

    jQuery(document).ready(function ($) {
        var options = {
            $AutoPlay: true,
            $DragOrientation: 3
        };

        var jssor_slider1 = new $JssorSlider$("slider1_container", options);

        //you can add shadow for outer container after jssor slider initialized.
        $("slider1_container").addClass("shadow");
        //or you can add shadow for slides container
        //$("slides1_container").addClass("shadow");
    });
</script>


<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">
    <!-- Slides Container -->
    <div id="slides1_container" u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
        overflow: hidden;">
        ...
    </div>
</div>

有什么方法可以在 jssor 滑块中为图像添加框阴影？

any way to add a box-shadow to images in a jssor slider?

html

javascript

css

jssor