如何在屏幕中间对齐这些猫头鹰项目?
尝试:center: true
请在全页视图中查看:
var owl = $('.video-thumb').owlCarousel({
items: 7,
autoplay: false,
loop: false,
nav: true,
dots: false,
margin: 30,
center: true,
responsive: {
0: {
items: 1
},
640: {
items: 2
},
768: {
items: 3
},
992: {
items: 4
},
1200: {
items: 5
},
1600: {
items: 7
}
}
});
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<div class="video-thumb owl-carousel owl-theme">
<div class="thumb-item">
<a href="#"><img src="https://via.placeholder.com/150" alt="eMAM Cloud" /></a>
</div>
<div class="thumb-item">
<a href="#"><img src="https://via.placeholder.com/150" alt="eMAM Cloud" /></a>
</div>
</div>
它可以包含任意数量的项目。
答案 0 :(得分:1)
轮播是页面的整个宽度,因此它已经居中了。如果您希望它的宽度小于全角宽度,则可以向width
添加.owl-carousel
样式,然后使用justify-content:center
将整个内容放入Flexbox。
答案 1 :(得分:1)
将此添加到您的CSS:
.owl-carousel{
display: flex !important; // to override display:bloc i added !important
flex-direction: row;
justify-content: center; // to center you carousel
}
JSFiddle:https://jsfiddle.net/2z1qadv3/