Topic: Carousel Picture Alignment issue

phoenixtech pro asked 7 years ago


HI all, I noticed that pictures in the carousel are left-aligned per default. That looks bad if the slides have a resolution below viewport resolution resulting in the slides not being centered on page like any other container. I tried to add .flex-center to the "carousel-inner"-div. Now when new slides fade-in, the picture JUMPS from left to center position, so the final alignment is fine, but the "jumping" looks quite bad. Can anyone help me out to fix the carousel pictures to center without jumping ? Thanks and best regards.

Marta Wierzbicka staff answered 7 years ago


Hello, could you send me files with sample of your code on my mail: m.szymanska@mdbootstrap.com ? Best, Marta

phoenixtech pro answered 7 years ago


Hi Marta, The carousel from your link shows the same behavior like the other one: I you zoom down, the pictures/slides are left-aligned and the controls are centered...Is there no way that I can fix this? Otherwise the carousels are pretty much useless to me... regards, Sebastian

Marta Wierzbicka staff answered 7 years ago


Hello, now I understand you. If you use MDB version 4.1, please copy code of carousel from here: https://mdbootstrap.com/legacy/4.2.0/javascript/carousel and it should be right. In MDB 4.3.0 we have new carousels which are component from Bootstrap and this issue with left-aligned pictures is Bootstrap error. We will fix this soon. Best, Marta

phoenixtech pro answered 7 years ago


using 4.1 but it seems to be the case in all versions. if you go to https://mdbootstrap.com/javascript/carousel/ And zoom down the page with "CTRL"+"-" in the browser,you will see that the pictures in the basic carousel are left-aligned, while the controls and indicators remain center-aligned. I need even low-res slides to be center-aligned at all times. Thank you for your help

Marta Wierzbicka staff answered 7 years ago


Hello, What version of MDB do you use. Please describe your problem in more details and I will try to help you. Best, Marta

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No