1. MDB Home Page
  2. Support Main Page
  3. MDB React
Topic: Carousel showControls prop problem

Belovol pro asked 5 years ago

Good day! Have problem with showControls prop in Carousel. It doesn't work. Try this example. Toggling showIndicators works as expected, but showControls not. Try to toggle in MultiItem version - works properly. Why?

Eduardo Antonio Calva Ramirez free answered 3 years ago

good day,

I am using carousel with multi items but the icons of the controls are not shown this is my code and my evidence of how they look I am not using the pro version since I still want to specialize in the use of this frameworkenter image description here

enter image description here

Piotr Glejzer staff commented 3 years ago

you are using angular version so you have to put this problem on angular forum section

Belovol pro answered 5 years ago

Thank you, Cuba. The element actually was there, and it was established by React Dev Tools. The reason of misbehaviour was mistake in webpack.config.js. Arrows are implemented as background images, and this mistake leaded to incorrect ref io this image in main.css bundle. P.S. It seems to me, that arrows should be bigger, but it's question of taste, of course.

Jakub Strebeyko staff answered 5 years ago

Hey Belovol, The code you provided works great on my end. To debug the issue I think it would be necessary to know whether the controls are not there, or are they not being visible. Do check it out, please consider using React Dev Tools. If the element is not there at all, I would be looking in console, is anything (a render error) being logged out. In case the element is there, but not visible, I would make sure all the necessary style files are being imported properly, as  per the docs (although I don't think it's the case, since other styles seem to be there). Best, Kuba

Belovol pro answered 5 years ago

Here is code and screenshot. With MultiCarousel toggling showControls works as expected. Toggling showIndicators also works normally - show when true and not when false. But toggling showControls with Carousel has no effect - there is no semitransparent arrows in any case.

Jakub Strebeyko staff answered 5 years ago

Could you perhaps provide a little use-case example, where the arrows are missing despite the props sent down to <Carousel>? Maybe there is something in the console? These details could help us to get to the source of the problem, as the code works properly on our end. EDIT: Please make sure you follow instructions from the MDB React Docs and not, say, jQuery. Best, Kuba

Belovol pro answered 5 years ago

These little semitransparent arrows are absent.

Jakub Strebeyko staff answered 5 years ago

Hi there, Welcome to the Support Board! What behavior exactly are you experiencing? From what I can see on my end, at the MDB React Carousel docs page, the props seem to be working the way they should - adding controls (little quasi-transparent arrows on the two sides of the component), that make it possible to slide the slides, to the Carousel components  that have showControls={true}. Is it something else where you stand? With Best Regards, Kuba

FREE CONSULTATION

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

Closed

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.7.1
  • Device: 4xIntel Core i7-4510U CPU @2 GHz
  • Browser: Google Chrome V- 68.0.3440.8
  • OS: openSUSE Leap 42.3
  • Provided sample code: No
  • Provided link: Yes
Tags
react carousel
About author
Belovol
Pro User 140Support score
8Questions 12Answers 0Snippets