RTL Carousel

Topic: RTL Carousel

itay pro asked 4 years 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 4 years 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.

Add comment

itay pro answered 4 years ago

0 0 Best answer

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

Konrad Stępień staff commented 4 years ago

Hi @itay,

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

itay pro commented 4 years 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 4 years 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 4 years ago

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

Add comment

itay pro answered 4 years ago

0 0 Best answer

Very nice !

Thanks.

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

Add comment

Konrad Stępień staff answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

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.

Add comment

itay pro answered 4 years ago

0 0 Best answer

[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

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: 8.8.0
Device: NA
Browser: NA
OS: NA
Provided sample code: No
Provided link: No

itay

Pro User 2474Support score
150Questions 196Answers 0Snippets