RTL Carousel

web
mobile

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

Very nice !

Thanks.

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


itay pro answered 3 months ago

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


Konrad Stępień staff commented 3 months ago

Hi @itay,

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


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

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


Please insert min. 20 characters.
Status

Resolved

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
Tags