[英]Can I customize Carousel-indicators in react-bootstrap
我正在使用http://react-bootstrap.github.io/ Carousel 组件。 我正在尝试自定义轮播指示器,包括一些文本,并使其看起来像一个带有文本的按钮,但是将渲染“ol”标签反应成一个新的 CarouseItem 并且没有重定向功能
return (
<Carousel id="sampleSlide" indicators={false}>
<ol className="carousel-indicators">
<li data-target='#sampleSlide' data-slide-to="0" className="active"></li>
<li data-target= '#sampleSlide' data-slide-to="1"></li>
</ol>
<CarouselItem>
<div className="itemContent">
Hello World
</div>
</CarouselItem>
<CarouselItem>
<div className="itemContent">
Hello World
</div>
</CarouselItem>
</Carousel>
);
有没有办法定制它或任何其他方法来做到这一点?
您可以使用自定义 CSS/SCSS 更改 Bootstrap 轮播指示器
反应代码:
<div className={classes.my__carousel_main}>
<Carousel>
<Carousel.Item>
<img
className="d-block w-100"
src={require("../../assets/utf_banner.png")}
alt="First slide"
/>
<Carousel.Caption>
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
</div>
CSS/SCSS 代码:
.my__carousel_main {
div{
ol{
li{
background-color: red;
border-radius: 50%;
height: 10px;
width: 10px;
}
}
}
}
谢谢你 ;)
这就是我定制它的方式:
.carousel-indicators li {
border-top: unset;
width: 10px;
border-bottom: unset;
border: 1px solid transparent;
border-left-width: 0;
border-right-width: 0;
border-radius: 10px;
background-color: rgba(169, 29, 42, 0.4);
height: 10px;
width: 20px;}
.carousel-indicators .active {
border-top: unset;
border-bottom: unset;
border: 1px solid transparent;
border-left-width: 0;
border-right-width: 0;
border-radius: 10px;
background-color: #A91D2A;
height: 10px;
width: 50px}
我这样定制它们:
.carousel-indicators [data-bs-target] {
width: 10px !important;
height: 10px !important;
border: 1px solid transparent !important;
border-radius: 10px;
}
.carousel-control-prev-icon {
background-image: url("./../../images/play.svg") !important;
transform: scaleX(-1);
}
.carousel-control-next-icon {
background-image: url("./../../images/play.svg") !important;
}
添加!important
否则它不会覆盖默认样式。
这就是我设法自定义的方式:
.carousel-indicators button {
width: 0.4rem !important;
height: 0.4rem !important;
border-radius: 50%;
}
.carousel-indicators button:not(:first-child) {
margin-left: 0.5rem;
}
.carousel-indicators .active {
background-color: #ff7a54;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.