Topic: Icons Controls Carousel not rendering
The navigation control button icons are not rendering.
style.scss:
@import "mdb-angular-file-upload/scss/file-upload.scss";
@import "mdb-angular-multi-item-carousel/scss/multi-item-carousel.scss"; @import "mdb-angular-ecommerce-gallery/scss/ecommerce-gallery.scss";
@import "@fortawesome/fontawesome-free/css/all.css";
// Importação de variáveis padrão MDB $tooltip-bg: #000 !important; $tooltip-border-color: #be0505; $tooltip-border-radius: 0.75rem !important; $tooltip-padding-x: 5px;
$carousel-control-icon-width: 2rem !important; $carousel-control-icon-font-size: 1.5rem !important;
$dark-red: #7f0303; // Cor vermelha escura nas bordas $black: #000; // Cor preta no centro
@import 'mdb-angular-ui-kit/assets/scss/mdb.scss';
Imports in component:
@Component({
selector: 'app-comments-notice', standalone: true, imports: [ CommonModule,
MdbCarouselModule,
MdbMultiItemCarouselModule,
MdbCollapseModule,
MdbRippleModule,
MdbTooltipModule,
], templateUrl: './comments-notice.component.html', styleUrl: './comments-notice.component.scss' })
html:
<mdb-carousel [controls]="true" [indicators]="true" class="slide">
@for (image of feed.image; track $index) {
<mdb-carousel-item>
<img class="rounded shadow mb-2" [src]="image.url"
alt="Imagem da Notícia {{$index + 1}}"
style="width: 360px !important; height: 200px !important;"/>
</mdb-carousel-item>
}
</mdb-carousel>
resource image:
I made some changes, including some SCSS variables for the carousel, and the right/left arrows now appear.
Changes in style.scss:
$carousel-control-color: $black;
$carousel-control-width: 25%;
$carousel-control-opacity: 0.9;
$carousel-control-hover-opacity: 0.9;
$carousel-control-transition: opacity 0.15s ease;
$carousel-control-prev-icon-bg: url("data:image/svg+xml,http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'>");
$carousel-control-next-icon-bg: url("data:image/svg+xml,http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'>");
$carousel-control-icon-width: 2rem !important;
$carousel-control-icon-font-size: 1.5rem !important;
What intrigues me is the small square in the background.
Do you know how to remove that square? The square is show by this code by prev e next icon: .carousel-control-next-icon::after { content: "\f054"; <-- Here showing square ... }
allancmello pro premium commented 10 months ago
I solved the problem no style.scss with:
.carousel-control-prev-icon::after,.carousel-control-next-icon::after { content: none !important; }
In console debug, showing the version of "@fortawesome/fontawesome-free" for 6.
My version instaled is 7.0.1, Is there an incompatibility between these versions?
Arkadiusz Idzikowski staff commented 10 months ago
We recommend the ^6.0.0 that we install by default when you use our zip projects or schematics installation. I just checked the component with 7.0.0 and it seems like this version bump caused the problem (probably due to some changes in the syntax).
allancmello pro premium commented 10 months ago
That's exactly it, a version incompatibility with the @fortawesome/fontawesome-free library.
I downgraded it and now it's OK.
Thanks for the help.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 9.0.0
- Device: All
- Browser: All
- OS: All
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 10 months ago
Do you see any errors in the browser dev console? Did you install the `@fortawesome/fontawesome-free' package in this project?
allancmello pro premium commented 10 months ago
It shows no errors in the console. The @fortawesome/fontawesome-free library is installed. packge.json: "@fortawesome/fontawesome-free": "^7.0.1"
The swiper library is also installed in project, could there be a conflict?