Topic: "Multi Item Carousel Advance - 1 item per time" in react pro
                  
                  engineer_yasin
                  premium
                  asked 6 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 5 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 5 years ago
We didn't update the package yet. We will probably do it in 2/4 weeks.
                      
                      David D
                      free
                        answered 5 years ago
                    
Please make it, it will be very nice for me
                      
                      Aliaksandr Andrasiuk
                      staff
                        answered 6 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 5 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 5 years ago
Do you have some API examples about that? I can't reproduce this problem.
developer_R free commented 5 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