Изменение цвета стрелок в карусели ng-bootstrap
Я создаю карусель с помощью ng-bootstrap, я хочу изменить цвета стрелок или изображение с белого на черный, потому что у меня есть белые фоновые изображения, и они невидимы. Моя проблема в том, что я не могу получить диапазон, я не знаю, как это назвать в scss. Я использую bootstrap 4 и ng-bootstrap для углового https://ng-bootstrap.github.io/#/components/carousel/examples. Когда я меняю URL-адрес изображения в консоли, он работает. Пытался достать стрелы напрямую, но ничего не получается.
Мой код:
<div class = "col-lg-6">
<div class = "imageCarousel">
<ng-container *ngIf = "product.images">
<ngb-carousel>
<ng-template id = "imageSlide" ngbSlide *ngFor = "let image of product.images | slice: 1">
<img [src] = "image">
</ng-template>
</ngb-carousel>
</ng-container>
</div>
</div>
scss:
.imageCarousel {
max-height: 500px;
text-align: center;
color: $color2;
.carousel .slide {
width: 50px;
height: 50px;
background-image: url("https://storage.googleapis.com/staging.pc-shop-260af.appspot.com/ic_keyboard_arrow_right_black_24px.svg");
}
img {
// border: 2px solid blue;
max-width: 100%;
max-height: 400px;
}
}
Ответы 5
ngb-carousel использует изображения SVG в качестве элементов управления, вы можете переопределить это с помощью собственного изображения кнопки prev и next:
.carousel-control-prev-icon{
background-image: url('https://apufpel.com.br/assets/img/seta_prim.png')
}
.carousel-control-next-icon{
background-image: url('https://apufpel.com.br/assets/img/seta_ult.png')
}
как я уже сказал выше, "я пытался получить стрелы напрямую"
Можете ли вы загрузить скрипку?
Я связал это с firebase db, не могу: /
загрузить версию mvp без подключения, только с помощью ползунка.
а что с угловым?
Проблема была в том, что я не могу стилизовать эти стрелки в стилях моих компонентов. Глобальный style.scss работал. В любом случае ваш ответ работает, но вы можете изменить его, чтобы использовать глобальный ответ, и я приму
При просмотре этого элемента управления по предоставленной ссылке вы можете увидеть, что к вашим двум кнопкам прикреплены классы.
У этих стрелок есть атрибут фонового изображения. Переопределите этот класс для этого атрибута в своем собственном файле css.
Я сейчас встаю из-за своего стола. Можете ли вы убедиться, что изменение атрибута в инспекторе работает?
Да, я проверил, ничего не работает, я пытался добраться до этих стрелок, прямо к ним, даже вызвать их родителям и все равно ничего
Да, это решено, но иногда необходимо установить инкапсуляцию представления на None
@Component({
selector: "app-builder",
templateUrl: "./builder.component.html",
styleUrls: ["./builder.component.css"],
encapsulation: ViewEncapsulation.None
})
Спасибо - это сработало, так что я смог заставить работать локальный CSS иконок.
Я попробовал ваше решение, и теперь локальный CSS работает, но стрелки не нажимают.
Ответ, данный Эдуардо (см. Выше), работает только в том случае, если для инкапсуляции установлено значение ViewEncapsulation.None, что может иметь непреднамеренные побочные эффекты для других аспектов вашего CSS.
Вместо этого можно использовать псевдокласс :: ng-deep для нацеливания на конкретный рассматриваемый CSS. В вашем файле scss используйте следующее:
::ng-deep .carousel-control-prev-icon{
background-image: url('your-replacement.svg');
}
::ng-deep .carousel-control-next-icon{
background-image: url('your-replacement.svg');
}
Добро пожаловать в Stack Overflow. Пожалуйста, пройдите экскурсию, чтобы узнать, как работает Stack Overflow, и прочтите Как задать вопрос о том, как улучшить качество вашего вопроса.
Сначала я бы предложил перейти на ng-bootstrap v6 +, который правильно делает компонент ngb ViewEncapsulation как None, чтобы его можно было установить через глобальный CSS или через неинкапсулированный компонент CSS. См. (https://github.com/ng-bootstrap/ng-bootstrap/issues/3479).
Во-вторых, переопределите SVG, просто установив его снова и изменив свойство наполнять на любой желаемый цвет.
.carousel-control-next-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(50, 54, 57)' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e") !important;
}
или, в качестве альтернативы, вы можете инвертировать цвета, если вам просто нужно больше контраста:
.carousel-control-next-icon,
.carousel-control-prev-icon {
filter: invert(1);
}
Установка инкапсуляция: ViewEncapsulation.None на вашем хост-компоненте - не лучшая практика. Более разумным решением будет внести эти изменения в записи ваших проектов styles.scss (или что-то еще, что указано в angular.json в качестве файла глобальных стилей).
да, проблема в том, что я не зеленый с scss, я пробовал это и все равно ничего