Attempted import error: 'MDBCarouselInner' is not exported f

Topic: Attempted import error: 'MDBCarouselInner' is not exported from 'mdb-react-ui-kit'

Rishi Purwar free asked 1 year ago

I'm building a testimonial slider using the mdb-react-ui-kit but I'm getting this error message: Attempted import error: 'MDBCarouselInner' is not exported from 'mdb-react-ui-kit'.

Code sandbox link: https://codesandbox.io/s/intelligent-jang-1pzotz?file=/src/App.js

Anyone please help me with this issue!

Add comment

chalicham priority answered 10 months ago

0 0 Best answer

Please insert min. 20 characters.

  <MDBCarouselItem style={{ 


  backgroundSize: 'contain', // Ensure the background image contains the container
}} 
    className='rounded carousel-item-custom img-fluid'
    itemId={'Every Decision Matters'}
    src='https://opengrit.com/images/SaaSPromotional'    
    alt='...'
  >

   <MDBBtn className=" bg-success text-white bg-opacity-75" onClick={() => setIsLoginRequired(true)}> 
      <h3>Every Decision Matters</h3>

    </MDBBtn>

  </MDBCarouselItem>

this item , i.e MDBBtn , or any thing in MDBCarousel is not visible in small view which less than 768px

Mateusz Lazaru staff commented 10 months ago

It's default behavior to hide caption on mobiles, in order to change it, you would need to override styles by adding the following CSS:

.carousel-caption {
  display: block !important;
}

Add comment

Mateusz Lazaru staff answered 1 year ago

0 0 Best answer

Please insert min. 20 characters.

Please remove MDBCarouselInner import and get rid of this component from the code. There must be an error in the documentation, you shouldn't use it. We're going to fix it soon.

https://codesandbox.io/s/inspiring-mcclintock-qvk1qi?file=/src/App.js

Correct Carousel structure is like:

<MDBCarousel>
  <MDBCarouselItem/>
  <MDBCarouselItem/>
  <MDBCarouselItem/>
</MDBCarousel>