如何使猫头鹰旋转木马中的中心图像比其他图像大？
如何使猫头鹰旋转木马中的中心图像比其他图像大？
提问于 2017-03-01 23:55:58
如何让Owl Carousel看起来像这样：
我试过了，但不起作用。
这里的工作文件将非常感谢您的帮助。
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
center: true,
navText: [
"<i class='fa fa-caret-left'></i>",
"<i class='fa fa-caret-right'></i>"
],
autoplay: true,
autoplayHoverPause: true,
items:5
}).carousel-wrap {
margin: 90px auto;
padding: 0 5%;
width: 80%;
position: relative;
}
.owl-carousel .item {
position: relative; /* fix blank or flashing items on carousel */
z-index: 100; /* fix blank or flashing items on carousel */
-webkit-backface-visibility: hidden; /* fix blank or flashing items on carousel */
}
.owl-nav > div {
margin-top: -26px;
position: absolute;
top: 50%;
color: #cdcbcd;
}
.owl-nav i {
font-size: 52px;
}
.owl-nav .owl-prev {
left: -30px;
}
.owl-nav .owl-next {
right: -30px;
}
.owl-item {
width: 100px!important;
}
.owl-item.center {
width: 150px!important;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/owl.carousel.min.js"></script>
<div class="carousel-wrap">
<div class="owl-carousel">
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
</div>
</div>
回答 1
Stack Overflow用户
发布于 2017-03-04 12:56:10
修改您的JS：
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
center: true,
navText: [
"<i class='fa fa-caret-left'></i>",
"<i class='fa fa-caret-right'></i>"
],
autoplay: true,
autoWidth:true,
autoplayHoverPause: true,
items:5
});添加此CSS：
.owl-carousel .owl-stage-outer { padding: 5% 0; }
.owl-item img {
transition: 0.45s;
}
.owl-item.center img {transform: scale(1.2); }删除此CSS：
.owl-item.center {
width: 150px!important;
}备注：可根据需要调整中心图片左右空间
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42536316
复制相关文章
相似问题