Javascript 如何将owl carosoul应用于放置在另一个图像上的图像

我想将

owl carousal

应用于

列表中的所有图像

项目i，e

li

我想保留大背景图像的原样。除此之外，我还想拥有所有

列表
图像的
狂欢节

目前carousal不起作用

这里是jsfiddle：

以下是我尝试过的：


$（“.owl carousel”）.owlCarousel（）
.service\u img{
宽度：100%；
高度：500px；
显示：块；
}
.服务图片小图片ul li{
显示：内联块；
/*位置：绝对位置；
最高：33%*/
}
.小图片{
最高：25%；
左：90px；
不透明度：0.9；
位置：绝对位置；
}
.小图片{
右边填充：50px；
}
.图像文本：悬停{
}








您可以进行以下更改以获得类似的结果

HTML

JS

你能不能让上面的结果与所有的图像不是一个，自动播放你可以通过这个链接。这太容易了，你只需要在$（“.owl carousel”）.owlCarousel（{item:5，autoplay:true}）中添加选项；
<div class="container-fluid">
    <div class="col-md-12 col-xs-12 col-sm-12">          
            <div class="small-images">  
                 <ul class="owl-carousel">
                    <li><img src="http://via.placeholder.com/100x100" class="image-text" title="image 1"></li>
                    <li><img src="http://via.placeholder.com/100x100" class="image-text" title="image 2"></li>
                    <li><img src="http://via.placeholder.com/100x100" class="image-text" title="image 3"></li>
                 </ul>
            </div>
    </div>
</div>
<br><br>

.small-images{
    width:100%;
    height:500px;
     display: block;
    background-image: url('https://s9.postimg.org/w3pkeix2n/Services.jpg')
}
.image-text{
    margin: 10px;
}
.owl-carousel{
    list-style-type: none;
}

$(".owl-carousel").owlCarousel();