Topic: MDBCarousel text or image overay
heimi premium asked 4 years ago
How can I place a text or image over the MDBCarousel images?
<MDBContainer fluid className="container-area">
<img src={iconCertified} className="badges" alt="" />
<MDBCarousel>...
Krzysztof Wilk staff answered 4 years ago
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 + '/logo.png'} alt="logo" />
mark-steven-au premium answered 4 years ago
![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
Jakub Chmura staff answered 4 years ago
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Premium
- Premium support: Yes
- Technology: MDB React
- MDB Version: 4.23.0
- Device: web
- Browser: Chrome
- OS: osx
- Provided sample code: No
- Provided link: No