Topic: "Multi Item Carousel Advance - 1 item per time" in react pro
engineer_yasin premium asked 5 years ago
I want "Multi Item Carousel Advance - 1 item per time" part for "react pro", how can i have it?
Ian Zhang free answered 4 years ago
Hey there! Did you all manage to check in this feature yet? Would love to use it for an existing project
Piotr Glejzer staff commented 4 years ago
We didn't update the package yet. We will probably do it in 2/4 weeks.
David D free answered 4 years ago
Please make it, it will be very nice for me
Aliaksandr Andrasiuk staff answered 5 years ago
Hi,
Realization of logic behaviour of the MultiItem carousel wasn't except a 1 item per time. You can try to use the next code, but items will not be displayed correctly because of inner implementation:
import React from 'react';
import {
MDBCarousel,
MDBCarouselInner,
MDBCarouselItem,
MDBContainer,
MDBRow,
MDBCol,
MDBCard,
MDBCardImage,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBBtn
} from 'mdbreact';
const MultiCarouselPage = () => {
return (
<MDBContainer>
<MDBCarousel activeItem={1} length={6} slide={true} showControls={true} showIndicators={true} multiItem>
<MDBCarouselInner>
<MDBRow className='d-flex justify-content-center'>
<MDBCarouselItem itemId='1'>
<MDBCol md='6'>
<MDBCard className='mb-2 mx-auto'>
<MDBCardImage
className='img-fluid'
src='https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
/>
<MDBCardBody>
<MDBCardTitle>MDBCard title</MDBCardTitle>
<MDBCardText>
Some quick example text to build on the card title and make up the bulk of the card's
content.
</MDBCardText>
<MDBBtn color='primary'>MDBBtn</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBCarouselItem>
<MDBCarouselItem itemId='2'>
<MDBCol md='6'>
<MDBCard className='mb-2'>
<MDBCardImage
className='img-fluid'
src='https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg'
/>
<MDBCardBody>
<MDBCardTitle>MDBCard title</MDBCardTitle>
<MDBCardText>
Some quick example text to build on the card title and make up the bulk of the card's
content.
</MDBCardText>
<MDBBtn color='primary'>MDBBtn</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBCarouselItem>
<MDBCarouselItem itemId='3'>
<MDBCol md='6'>
<MDBCard className='mb-2'>
<MDBCardImage
className='img-fluid'
src='https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg'
/>
<MDBCardBody>
<MDBCardTitle>MDBCard title</MDBCardTitle>
<MDBCardText>
Some quick example text to build on the card title and make up the bulk of the card's
content.
</MDBCardText>
<MDBBtn color='primary'>MDBBtn</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBCarouselItem>
<MDBCarouselItem itemId='4'>
<MDBCol md='6'>
<MDBCard className='mb-2'>
<MDBCardImage
className='img-fluid'
src='https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
/>
<MDBCardBody>
<MDBCardTitle>MDBCard title</MDBCardTitle>
<MDBCardText>
Some quick example text to build on the card title and make up the bulk of the card's
content.
</MDBCardText>
<MDBBtn color='primary'>MDBBtn</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBCarouselItem>
<MDBCarouselItem itemId='5'>
<MDBCol md='6'>
<MDBCard className='mb-2'>
<MDBCardImage
className='img-fluid'
src='https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg'
/>
<MDBCardBody>
<MDBCardTitle>MDBCard title</MDBCardTitle>
<MDBCardText>
Some quick example text to build on the card title and make up the bulk of the card's
content.
</MDBCardText>
<MDBBtn color='primary'>MDBBtn</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBCarouselItem>
<MDBCarouselItem itemId='6'>
<MDBCol md='6'>
<MDBCard className='mb-2'>
<MDBCardImage
className='img-fluid'
src='https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg'
/>
<MDBCardBody>
<MDBCardTitle>MDBCard title</MDBCardTitle>
<MDBCardText>
Some quick example text to build on the card title and make up the bulk of the card's
content.
</MDBCardText>
<MDBBtn color='primary'>MDBBtn</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBCarouselItem>
</MDBRow>
</MDBCarouselInner>
</MDBCarousel>
</MDBContainer>
);
};
export default MultiCarouselPage;
If it is necessary we can implement this possibility in the future.
Best regards.
1000k free commented 4 years ago
guy i have a problem when i connect with rest api; how to display because cards not move slide by slide. its show all "how to set itemsPerSlide = 3"
Piotr Glejzer staff commented 4 years ago
Do you have some API examples about that? I can't reproduce this problem.
developer_R free commented 4 years ago
is this support API?
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.18.0
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No