如何在放置在另一个图像顶部的图像上应用 猫头鹰卡罗苏尔.

Question

我想将owl carousal应用于放置在list项目中的所有图像 i，e li

我想保留大背景图像，最重要的是，我希望拥有所有list图像image轮播。

目前轮播不起作用。

这是JSFIDDLE：http://jsfiddle.net/eabangalore/s7teyzpL/26/

这是我尝试过的：

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

		.service_img{
			width:100%;
			height:500px;
			display: block;
		}
		.service_img .small-images ul li{
			display: inline-block;
		    /* position:absolute; 
		     top: 33%;*/
		}
		.small-images{
			top: 25%;
			left:90px;
			opacity: 0.9;
		    position: absolute;
		}
	    .small-images ul li{
          padding-right: 50px;
		}
	 .image-text:hover{
	  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<div class="container-fluid">
		<div class="col-md-12 col-xs-12 col-sm-12 service_img">
			 <img src="https://s9.postimg.org/w3pkeix2n/Services.jpg">
				<div class="small-images">	
					 <ul>
					 	<li><img src="http://via.placeholder.com/50x50" class="image-text" title="image 1"></li>
					 	<li><img src="http://via.placeholder.com/50x50" class="image-text" title="image 2"></li>
					 	<li><img src="http://via.placeholder.com/50x50" class="image-text" title="image 3"></li>
					 </ul>
				</div>
		</div>
	</div><br><br>

Answer 1

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

.HTML

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

.CSS

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

.JS

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