RTL Carousel

itay pro asked 10 months ago

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.)

Konrad Stępień staff commented 10 months 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 use previousSlide() and nextSlide() inputs on custom buttons.

itay pro answered 9 months ago

[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

Konrad Stępień staff answered 9 months ago

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.

itay pro answered 9 months ago

Very nice !


P.S. since it is in a sub component, I needed to add ::ng-deep in front of any selector above

itay pro answered 5 months ago

Is there a way to remove the dots without using ::ng-deep ?

Konrad Stępień staff commented 5 months ago

Hi @itay,

You can try to paste these styles in your global file styles.scss.

itay pro commented 5 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 5 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 5 months ago

Got it..........

Please insert min. 20 characters.


Specification of the issue
  • 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