Topic: "Multi Item Carousel Advance - 1 item per time" in react pro

engineer_yasin premium asked 4 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 3 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 3 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


Piotr Glejzer staff commented 4 years ago

It's in plans. We will make it soon. Have a nice day.


Aliaksandr Andrasiuk staff answered 4 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 3 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 3 years ago

Do you have some API examples about that? I can't reproduce this problem.


developer_R free commented 3 years ago

is this support API?



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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