Можно ли изменить кнопки вперёд/назад в слайдере бутстрапа?

Question

Делаю слайдер на бутстрапе, код ниже. Хотелось бы заменить стандартные стрелочки вперёд и назад на собственные иконки, которые будут не поверх слайдов, а по бокам от них. Возможно ли это как-то сделать?

export default class Services extends Component {
  render() {
    return (
      <section className="slider">
        <div className="container">
          <Carousel>
            <Carousel.Item interval={3000}>
              <div className="myslide">
                  <img src={image1} alt="1" />

                  <img src={image2} alt="2" />

                  <img src={image3} alt="3" />

                  <img src={image4} alt="4" />

                  <img src={image5} alt="5" />

                  <img src={image6} alt="6" />
                  </div>
            </Carousel.Item>
            <Carousel.Item interval={3000}>
              <div className="myslide">
                  <img src={image7} alt="7" />

                  <img src={image8} alt="8" />

                  <img src={image9} alt="9" />

                  <img src={image10} alt="10" />

                  <img src={image11} alt="11" />

                  <img src={image12} alt="12" />
                  </div>
            </Carousel.Item>
            <Carousel.Item interval={3000}>
              <div className="myslide">
                  <img src={image13} alt="13" />

                  <img src={image14} alt="14" />

                  <img src={image15} alt="15" />

                  <img src={image16} alt="16" />

                  <img src={image17} alt="17" />

                  <img src={image18} alt="18" />
                  </div>
            </Carousel.Item>
            <Carousel.Item interval={3000}>
              <div className="myslide">
                  <img src={image17} alt="17" />

                  <img src={image18} alt="18" />

                  <img src={image19} alt="19" />

                  <img src={image20} alt="20" />

                  <img src={image21} alt="21" />

                  <img src={image22} alt="22" />
                  </div>
            </Carousel.Item>
          </Carousel>
        </div>
      </section>
    );
  }
}

Answer 1

Заменить можно через стили элементов следующим образом:

.carousel-control-prev {
  margin-left: -100px;
  color: black;
  opacity: 1 !important;
}

.carousel-control-next {
  margin-right: -100px;
  color: black;
  opacity: 1 !important;
}

.carousel-control-prev-icon {
  background-image: url(../img/slides/prev.min.png) !important;
  height: 70% !important;
}

.carousel-control-next-icon {
  background-image: url(../img/slides/next.min.png) !important;
  height: 70% !important;
}

Не уверена, насколько это корректно.

БЛОГ НА HUSL

Можно ли изменить кнопки вперёд/назад в слайдере бутстрапа?

Ответы (1 шт):