0

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

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

1 ответ 1

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;
}

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.