居中对齐 owl 个轮播项目
Center align owl carousel items
如何在屏幕中间对齐这个 owl 项目?
尝试过: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>
它可能包含任意数量的项目。
轮播是整个页面的宽度,因此它已经居中。如果您希望它小于全宽,您可以将 width
样式添加到 .owl-carousel
并将整个内容放入带有 justify-content:center
.
的 flexbox 中
将此添加到您的 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/
您无需将 owl-carousel 更改为 display: flex
& justify content: center
。 Owl 圆点容器位于 owl-旋转木马内。所以将容器的宽度设置为100% & justify-content: center
。这仅影响容器内的点。这是层次结构。
owl-轮播
|__owl-dots
|___owl-dot
这是一个示例代码,用于在任何地方手动定位点。
#my-carousel .owl-dots {
position: absolute;
width: 100%;
bottom: 12%;
display: flex;
justify-content: center;
}
如何在屏幕中间对齐这个 owl 项目?
尝试过: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>
它可能包含任意数量的项目。
轮播是整个页面的宽度,因此它已经居中。如果您希望它小于全宽,您可以将 width
样式添加到 .owl-carousel
并将整个内容放入带有 justify-content:center
.
将此添加到您的 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/
您无需将 owl-carousel 更改为 display: flex
& justify content: center
。 Owl 圆点容器位于 owl-旋转木马内。所以将容器的宽度设置为100% & justify-content: center
。这仅影响容器内的点。这是层次结构。
owl-轮播
|__owl-dots
|___owl-dot
这是一个示例代码,用于在任何地方手动定位点。
#my-carousel .owl-dots {
position: absolute;
width: 100%;
bottom: 12%;
display: flex;
justify-content: center;
}