首頁猿問中心對齊貓頭鷹輪播項(xiàng)目

中心對齊貓頭鷹輪播項(xiàng)目

Html5

慕標(biāo)5832272 2024-01-22 15:06:05

如何在屏幕中間對齊這個(gè)貓頭鷹項(xiàng)目？嘗試過：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>它可能包含任意數(shù)量的項(xiàng)目。JSFiddle

查看完整描述

3 回答

喵喵時(shí)光機(jī)

TA貢獻(xiàn)1846條經(jīng)驗(yàn) 獲得超7個(gè)贊

將其添加到您的 CSS 中：

.owl-carousel {

display: flex !important; /* To override display:block I added !important */

flex-direction: row;

justify-content: center; /* To center the carousel */

}

JSFiddle： https: //jsfiddle.net/2z1qadv3/

反對回復(fù) 2024-01-22

陪伴而非守候

TA貢獻(xiàn)1757條經(jīng)驗(yàn) 獲得超8個(gè)贊

您不需要將 owl-carousel 更改為display: flex& justify content: center。貓頭鷹點(diǎn)容器位于貓頭鷹旋轉(zhuǎn)木馬內(nèi)。因此將容器的寬度設(shè)置為 100% & justify-content: center。這僅影響容器內(nèi)的點(diǎn)。這是層次結(jié)構(gòu)。

貓頭鷹旋轉(zhuǎn)木馬

|__ 貓頭鷹點(diǎn)

|___ 貓頭鷹點(diǎn)

以下是手動(dòng)將點(diǎn)放置在任何位置的示例代碼。

#my-carousel .owl-dots {

position: absolute;

width: 100%;

bottom: 12%;

display: flex;

justify-content: center;

}

反對回復(fù) 2024-01-22