MDBCarousel text or image overay

Hi @heimi,

You should put text or image to <MDBCarouselCaption> component. Look at this snippet.

import React from 'react';
import {
  MDBCarousel,
  MDBCarouselCaption,
  MDBCarouselInner,
  MDBCarouselItem,
  MDBView,
  MDBMask,
  MDBContainer
} from 'mdbreact';

const CarouselPage = () => {
  return (
        <MDBCarousel
          activeItem={1}
          length={4}
          showControls={true}
          showIndicators={true}
          className='z-depth-1'
          slide
        >
          <MDBCarouselInner>
            <MDBCarouselItem itemId='1'>
              <MDBView>
                <img
                  className='d-block w-100'
                  src='https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg'
                  alt='First slide'
                />
                <MDBMask overlay='black-light' />
              </MDBView>
              <MDBCarouselCaption>
                <h3 className='h3-responsive'>Light mask</h3>
                <p>First text</p>
                <img
                  className='d-block w-100'
                  src='https://mdbootstrap.com/img/Photos/Slides/img%20%28143%29.jpg'
                  alt="Mattonit's item"
                />
              </MDBCarouselCaption>
            </MDBCarouselItem>
            <MDBCarouselItem itemId='2'>
              <MDBView>
                <img
                  className='d-block w-100'
                  src='https://mdbootstrap.com/img/Photos/Slides/img%20(99).jpg'
                  alt='Second slide'
                />
                <MDBMask overlay='black-strong' />
              </MDBView>
              <MDBCarouselCaption>
                <h3 className='h3-responsive'>Strong mask</h3>
                <p>Second text</p>
                <img
                  className='d-block w-100'
                  src='https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg'
                  alt='First slide'
                />
              </MDBCarouselCaption>
            </MDBCarouselItem>
            <MDBCarouselItem itemId='3'>
              <MDBView>
                <img
                  className='d-block w-100'
                  src='https://mdbootstrap.com/img/Photos/Slides/img%20(17).jpg'
                  alt='Third slide'
                />
                <MDBMask overlay='black-slight' />
              </MDBView>
              <MDBCarouselCaption>
                <h3 className='h3-responsive'>Slight mask</h3>
                <p>Third text</p>
                <img
                  className='d-block w-100'
                  src='https://mdbootstrap.com/img/Photos/Slides/img%20(99).jpg'
                  alt='Second slide'
                />
              </MDBCarouselCaption>
            </MDBCarouselItem>
            <MDBCarouselItem itemId='4'>
              <MDBView>
                <img
                  className='d-block w-100'
                  src='https://mdbootstrap.com/img/Photos/Slides/img%20%28143%29.jpg'
                  alt="Mattonit's item"
                />
                <MDBMask overlay='black-light' />
              </MDBView>
              <MDBCarouselCaption>
                <h3 className='h3-responsive'>Sopot Beach</h3>
                <p>Taken june 21th by @mattonit</p>
                <img
                  className='d-block w-100'
                  src='https://mdbootstrap.com/img/Photos/Slides/img%20(17).jpg'
                  alt='Third slide'
                />
              </MDBCarouselCaption>
            </MDBCarouselItem>
          </MDBCarouselInner>
        </MDBCarousel>
  );
};

export default CarouselPage;

Best, Kuba

![Hi Kuba, Know this should be simple but how do you put a local picture instead of remote image. Keeps failing for me.Do I go with this suggestion which seems very long winded .

Or place images in public and source them there?public/images/Regards Mark]1

Hi!

There are two ways to load local pictures.

First: You can use import. Just import your picture and use it in src attribute in JavaScript expression.

import logo from './logo.png';

then

<img src={logo} alt="logo" />

Second: Use your public folder.

// Assuming logo.png is in public/ folder of your project
<img src={process.env.PUBLIC_URL + 'https://mdbcdn.b-cdn.net/logo.png'} alt="logo" />