Ngx-bootstrap: Carousel - Control Prev & Next

Created on 2 Apr 2018 · 4Comments · Source: valor-software/ngx-bootstrap

Is it possible to generate Prev and Next directly in HTML without being generated by the component?

Another question is about adjusting Next and Prev through the CSS of the component.
I have a css file with the properties, how do you have to get the prev and next buttons.
More does not take the styles. Is there any way to be done?

comp(carousel) question

Source

marcocoelho

Most helpful comment

ngx-bootstrap doesn't support custom templates for carousel
you can customize the look of buttons from component's CSS via ::ng-deep like this

::ng-deep .carousel-control-prev, ::ng-deep .carousel-control-next {
      background-color: white;
    }

example - https://stackblitz.com/edit/angular-cf1qk6?file=app%2Fbasic.ts

IlyaSurmay on 5 Apr 2018

👍6

All 4 comments

ngx-bootstrap doesn't support custom templates for carousel
you can customize the look of buttons from component's CSS via ::ng-deep like this

::ng-deep .carousel-control-prev, ::ng-deep .carousel-control-next {
      background-color: white;
    }

example - https://stackblitz.com/edit/angular-cf1qk6?file=app%2Fbasic.ts

IlyaSurmay on 5 Apr 2018

👍6

Example to change only the icon

::ng-deep .carousel-control-next-icon, ::ng-deep .carousel-control-prev-icon {
background-image: none;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: #005598;
}

::ng-deep .carousel-control-prev-icon::before{
content: "\f104";
}

::ng-deep .carousel-control-next-icon::before{
content: "\f105";
}