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 3 days 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 3 days 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 3 days 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 4 days 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 3 days 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?