0

I want to make carousel slider with middle item (active item) is bigger than other. Like this image below enter image description here

So i use callback function of react-multi-carousel

<Carousel
              className="relative"
              responsive={responsiveCarouselTournamentBanner}
              // autoPlay={true}
              autoPlaySpeed={3000}
              infinite
              arrows={false}
              itemClass="custom-item-class"
              // centerMode={true}
              slidesToSlide={1}
              beforeChange={(nextSlide, current) => {
                console.log("Before Change: ", nextSlide, "Current: ", current)
                setSlideIndex(nextSlide)
              }}
              // containerClass={`${
              //   slideIndex % 2 === 0 ? "custom-container-odd" : "custom-container-even"
              // }`}
            >
              {data?.banners?.map((item, index) => (
                <img
                  key={index}
                  data-index={index}
                  src={item || "/images/tournament-img-default.png"}
                  className="w-full max-w-[90%] h-[210px] md:max-w-[858px] md:h-[482px] object-cover mx-auto rounded-xl banner-primary-color"
                  alt="dgg-banner"
                />
                // <div key={index}>ABC</div>
              ))}
            </Carousel>

Like this. I want to use slideIndex from nextSlide,current in beforeChange. But with Infinity mode, totalItems will double. And i cannot control my items in carousel.

So i want to ask my question to handle this case of carousel like this one. Many thanks. I struggle with this issue for a week.

duc nguyendinh trung
  • 73
  • 1
  • 9

1 Answers1

-1

To create a carousel/slider with a larger active item in the middle, you can modify your code to achieve the desired effect. Here's an example of how you can approach it:

First, define the responsive settings for the carousel:

const responsiveCarouselTournamentBanner = {
  superLargeDesktop: {
    breakpoint: { max: 4000, min: 3000 },
    items: 5,
  },
  desktop: {
    breakpoint: { max: 3000, min: 1024 },
    items: 3,
  },
  tablet: {
    breakpoint: { max: 1024, min: 464 },
    items: 2,
  },
  mobile: {
    breakpoint: { max: 464, min: 0 },
    items: 1,
  },
};

Then, in your JSX code, use the beforeChange callback to update the active slide index and adjust the styles based on the active slide:

<Carousel
  className="relative"
  responsive={responsiveCarouselTournamentBanner}
  autoPlay={true}
  autoPlaySpeed={3000}
  infinite
  arrows={false}
  itemClass="custom-item-class"
  centerMode
  centerSlidePercentage={80}
  slidesToSlide={1}
  beforeChange={(nextSlide, currentSlide) => {
    setSlideIndex(nextSlide);
  }}
>
  {data?.banners?.map((item, index) => (
    <div
      key={index}
      className={`${
        slideIndex === index ? 'active-slide' : ''
      } custom-slide`}
    >
      <img
        src={item || '/images/tournament-img-default.png'}
        className="w-full h-[210px] md:h-[482px] object-cover mx-auto rounded-xl banner-primary-color"
        alt="dgg-banner"
      />
    </div>
  ))}
</Carousel>

You can add CSS styles to the active-slide and custom-slide classes to control the appearance of the active and non-active slides.

Make sure to adjust the code and styles according to your specific requirements and design.

Narendra Bisht
  • 1
  • 1