亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

無法用點自定義 react-bootstrap 輪播

無法用點自定義 react-bootstrap 輪播

莫回無 2022-12-02 16:04:29
我正在使用react-bootstrap它對我來說很好用的旋轉木馬，但我唯一不能定制的是：箭頭指標線我只想將箭頭顏色從白色透明度更改為橙色，我希望用點替換線條。       <Carousel className="home-slider">          {            LIST.map((classitem) =>               <Carousel.Item className="home-slider-item">                  <img                    className="slider-item"                    src={classitem.classpic[0]}                    alt="Slide"                  />                  <Carousel.Caption className="slider-item-content">                    <h3>{classitem.title}</h3>                    <p>{classitem.desc}</p>                    <div className="slider-button">                    <BlueButton link_href={`/classdetails?id=${classitem.id}`} text="Discover" />                             </div>                    </Carousel.Caption>                </Carousel.Item>              )                      }      </Carousel>CSS 是：.home-slider {    width: 70%;    margin-left: 20%;    margin-right: 10%;}.home-slider h3{    font-size: 24px;    color: white;    text-align: left;    font-family: Fredoka One;}.home-slider p{    font-size: 16px;    color: white;    font-weight: normal;    text-align: left;    font-family: Source Sans Pro;}.slider-item {    width: 100%;    height: 400px;    border-radius: 20px;    object-fit: cover;}.slider-item-content {    margin-bottom: 40px;    border-radius: 20px;    background-color: #ff725590;    padding: 10px 10px 10px 10px;}.slider-button {    text-align: left;    margin-top: 50px;;}這就是我所擁有的：關于如何將線更改為點并更改箭頭顏色的任何想法？
查看完整描述

5 回答

?
jeck貓

TA貢獻1909條經驗 獲得超7個贊

使用 owl carousel 是最好的選擇，它支持幾乎所有的瀏覽器，有很多選項我建議 OwlC 而不是 BS 滑塊。一些例子：

`https://codepen.io/tag/owl%20carousel/`


查看完整回答
反對 回復 2022-12-02
?
慕少森

TA貢獻2019條經驗 獲得超9個贊

將以下內容添加到您導入到項目中的 css 文件中就足夠了。如果你運行應用程序并構建它，你可以通過查看標簽輕松地使用 css 來完成它。


.carousel .carousel-indicators button {

  background-color: #3c9feb;

  border: none;

  border-radius: 50%;

  width: 10px;

  height: 10px;

}


查看完整回答
反對 回復 2022-12-02
?
蝴蝶不菲

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 />);

筆記：

  1. 我把你LIST的改成items了道具。我假設它是您想要在輪播上顯示的自定義對象列表。

  2. 我創建了一個函數，如 React 說明中所示，以容納回調等。

  3. 確保indicators={false}在添加自己的指標列表時進行。否則，該組件將生成兩個列表。

  4. 請注意如何根據自定義指標列表中的選擇索引手動設置“活動”類。

  5. 自定義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;

}


查看完整回答
反對 回復 2022-12-02
?
慕娘9325324

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;

}


查看完整回答
反對 回復 2022-12-02
?
千巷貓影

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;

}


查看完整回答
反對 回復 2022-12-02
  • 5 回答
  • 0 關注
  • 158 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號