5 回答

TA貢獻1909條經驗 獲得超7個贊
使用 owl carousel 是最好的選擇,它支持幾乎所有的瀏覽器,有很多選項我建議 OwlC 而不是 BS 滑塊。一些例子:
`https://codepen.io/tag/owl%20carousel/`

TA貢獻2019條經驗 獲得超9個贊
將以下內容添加到您導入到項目中的 css 文件中就足夠了。如果你運行應用程序并構建它,你可以通過查看標簽輕松地使用 css 來完成它。
.carousel .carousel-indicators button {
background-color: #3c9feb;
border: none;
border-radius: 50%;
width: 10px;
height: 10px;
}

TA貢獻1810條經驗 獲得超4個贊
owl carousel 沒有回答有關 React-bootstrap Carousel 的問題。要在 React-bootstrap 的 Carousel 組件中呈現自定義幻燈片和指示器的動態數組,您需要做很多事情。從他們網站上的說明開始,我會做這樣的事情:
function CustomReactCarousel(props) {
const { items } = props;
const [index, setIndex] = useState(0);
const handleSelect = (selectedIndex, e) => {
//React-bootstrap carousel has an indexing error that causes blank slides
//(probably happens when you customize it).
//You need to account for it in this callback...
//adjust index to 0 if selectedIndex is greater than index of last slide or
//it is less than zero
//remember slide indexes are zero-based
if (selectedIndex >= items.length || selectedIndex < 0 ){
setIndex(0);
} else if (selectedIndex !== index) {
setIndex(selectedIndex);
}
};
return (
<Carousel
activeIndex={index}
onSelect={handleSelect}
controls={true}
nextIcon={<span aria-hidden="true" className="fas fa-chevron-right fa-3x customNextClass"/>}
prevIcon={<span aria-hidden="true" className="fas fa-chevron-left fa-3x customPrevClass"/>}
indicators={false}
interval={5000}
>
{Items.map((item,itemIndex) => {
return(
<Carousel.Item className={"home-slider-item "+ item.itemSliderClass}>
<img
className={"slider-item "+ item.itemImgClass}
src={item.classpic[0]}
alt="Slide"
/>
<Carousel.Caption className={"slider-item-content "+ item.itemCaptionContent}>
<h3>{item.title}</h3>
<p>{item.desc}</p>
</Carousel.Caption>
</Carousel.Item>
)
})}
<ol className="carousel-indicators">
{items.map((item, itemIndex) => {
return (
<li
key={index}
onClick={() => this.handleCarouselSlide(itemIndex,null)}
className={((itemIndex === index) ? "active" : "")+" "+item.itemIndicatorClass}/>
);
})}
</ol>
</Carousel>
);
}
render(<CustomReactCarousel />);
筆記:
我把你
LIST
的改成items
了道具。我假設它是您想要在輪播上顯示的自定義對象列表。我創建了一個函數,如 React 說明中所示,以容納回調等。
確保
indicators={false}
在添加自己的指標列表時進行。否則,該組件將生成兩個列表。請注意如何根據自定義指標列表中的選擇索引手動設置“活動”類。
自定義React-boostrap Carousel時出現的array indexing error參見handleSelect回調函數中的注釋。上面的 handleSelect 回調應該可以修復該錯誤。
如果您想設置指示器按鈕的樣式,Beu 是正確的。通過引用它們的.carousel-indicators
類來設置它們的樣式(無論您是否自定義)。請注意,<ol className="carousel-indicators">
即使在上面顯示的自定義指標列表中,也會保留此類名稱。
.carousel-indicators li {
background-color: gray;
border-radius: 50%;
width: 8px;
height: 8px;
}
.carousel-indicators li.active {
background-color: #333;
width: 12px !important;
height: 12px !important;
}
除了新的自定義上一個和下一個圖標及其在此處執行的本地樣式之外,您還可以在 css 中設置它們的區域樣式。為此,請參考.carousel-control-prev和.carousel-control-next類:
.carousel-control-prev {
width: 10%;
margin-bottom: 30px;
}
.carousel-control-next {
width: 10%;
margin-bottom: 30px;
}

TA貢獻1783條經驗 獲得超4個贊
您可以自定義css來獲取它
.carousel-indicators li {
background-color: gray;
border-radius: 50%;
width: 8px;
height: 8px;
}
.carousel-indicators li.active {
background-color: #333;
width: 12px !important;
height: 12px !important;
}

TA貢獻1829條經驗 獲得超7個贊
對于仍然需要答案的任何人,我將整個輪播組件放在一個 div 中,并使用 is CSS 來設置指示器(按鈕)的樣式,對于箭頭,我沒有答案。我正在使用 react-boostrap v2.0
.carouselDiv >div >div >button{
background-color: black!important;
border-radius: 50% !important;
height: 12px!important;
width: 12px!important;
}
添加回答
舉報