Question

我想将$scope.addElem = function () { $scope.lista2.push({ com: $scope.newItem.com === null ? 'VUOTO' : $scope.newItem.com, gruppo: $scope.newItem.gruppo === null ? 'VUOTO' : $scope.newItem.gruppo }); };应用于owl carousal项目i中的所有图片，e list

我希望保留大背景图像。最重要的是，我希望li所有image张照片都是list。

目前，carousal无法正常工作。

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

以下是我的尝试：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

HTML

#include <iostream>
#include<vector>
#include<algorithm>
using namespace std;
int main() {
//The first part of pair contains the arrival time for every PID and
// the second part contains the PID NO.
vector<pair<int,int> >v;
 v.push_back({4,1});
 v.push_back({3,2});
 v.push_back({5,3});
  //sort the vector according to arrival time 
 sort(v.begin(),v.end());
  //Your Solution
 cout<<v[0].second<<" "<<v[1].second<<" "<<v[2].second<<endl;
return 0;

CSS

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

JS

.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 carosoul应用于放置在另一个图像上的图像

1 个答案: