Topic: RTL Carousel
Expected behavior
next button on the left, back on the right
Actual behavior
When the carousel is right to left, next button is still to the right instead of to the left and the back button is on the left side instead of the right side
Resources (screenshots, code snippets etc.)
[isControls\]="false" also hides the bottom dots and implementing the buttons is too much integration
Example if pretty straightforward. flow if from right to left instead of from left to right
Hi @itay,
You can change the position of buttons and others elements with scss.
For example please paste it in global scss file:
// add .carousel-indicators if you want flip dots
.carousel-control-prev, .carousel-control-next {
transform: scaleX(-1)
}
.carousel-control-next {
left: 0;
right: unset;
}
.carousel-control-prev {
right: 0;
left: unset;
}
Please try this code and tell me if you have still a problem.
Best, Konrad.
Very nice !
Thanks.
P.S. since it is in a sub component, I needed to add ::ng-deep in front of any selector above
Is there a way to remove the dots without using ::ng-deep ?
Konrad Stępień staff commented 11 months ago
Hi @itay,
You can try to paste these styles in your global file styles.scss.
itay pro commented 11 months ago
If I will do it it will still be global I want to confine it to the component's scope only
Arkadiusz Idzikowski staff commented 11 months ago
Please take a look at the styles customization guide: https://mdbootstrap.com/docs/angular/getting-started/styles-customization
You can also try to add a custom class to the element and then use this class in the css rule in styles.scss file to make sure that only this element will by styled.
itay pro commented 11 months ago
Got it..........
Resolved
- User: Pro
- Premium support: No
- Technology: Angular
- MDB Version: 8.8.0
- Device: NA
- Browser: NA
- OS: NA
- Provided sample code: No
- Provided link: No
Konrad Stępień staff commented a year ago
Hi @itay,
Can you send me an example?
Also if you want you can add custom controls for your carousel.
You can disable controls with
[isControls]="false"]input and then usepreviousSlide()andnextSlide()inputs on custom buttons.