CODEWITHSUNDEEP
reactjsnext.js
Mohammed Bekele
Mohammed Bekele

Reputation: 1255

How to Customize React-responsive-carousel arrow?

I'm Using react responsive carousel in my Next JS app with tailwind. how can customize next and prev button to circular shape?

<Carousel axis="horizontal" showStatus={false}>
        <div className="w-full relative pt-[100%]">
          <Image
            src={house.img}
            alt="profile"
            objectFit="cover"
            fill
            className="w-full h-full top-0 left-0 object-cover rounded-2xl"
          />
        </div>
        <div className="w-full relative pt-[100%]">
          <Image
            src={house.img}
            alt="profile"
            objectFit="cover"
            fill
            className="w-full h-full top-0 left-0 object-cover rounded-2xl"
          />
        </div>
        <div className="w-full relative pt-[100%]">
          <Image
            src={house.img}
            alt="profile"
            objectFit="cover"
            fill
            className="w-full h-full top-0 left-0 object-cover rounded-2xl"
          />
        </div>
      </Carousel>

Upvotes: 1

Views: 8653

Answers (1)

John Li
John Li

Reputation: 7447

According to the document of react-responsive-carousel, it seems that the arrows can be customized with the props renderArrowPrev and renderArrowNext on the Carousel component.

Assuming that there is a LeftIcon and a RightIcon that needed to replace the default arrows, here is a very basic example. It can be further customized with Tailwind to fit the use case.

Over simplified live demo: stackblitz (this demo used arrow icons from react-icons for convenience, but it can be customized as any custom icons preferred)

<Carousel
  axis="horizontal"
  showStatus={false}
  className="relative"
  renderArrowPrev={(clickHandler, hasPrev) => {
    return (
      <div
        className={`${
          hasPrev ? "absolute" : "hidden"
        } top-0 bottom-0 left-0 flex justify-center items-center p-3 opacity-30 hover:opacity-100 cursor-pointer z-20`}
        onClick={clickHandler}
      >
        <LeftIcon className="w-9 h-9 text-white" />
      </div>
    );
  }}
  renderArrowNext={(clickHandler, hasNext) => {
    return (
      <div
        className={`${
          hasNext ? "absolute" : "hidden"
        } top-0 bottom-0 right-0 flex justify-center items-center p-3 opacity-30 hover:opacity-100 cursor-pointer z-20`}
        onClick={clickHandler}
      >
        <RightIcon className="w-9 h-9 text-white" />
      </div>
    );
  }}
>
  <div className="w-full relative pt-[100%]">
    <Image
      src={house.img}
      alt="profile"
      objectFit="cover"
      fill
      className="w-full h-full top-0 left-0 object-cover rounded-2xl"
    />
  </div>
  <div className="w-full relative pt-[100%]">
    <Image
      src={house.img}
      alt="profile"
      objectFit="cover"
      fill
      className="w-full h-full top-0 left-0 object-cover rounded-2xl"
    />
  </div>
  <div className="w-full relative pt-[100%]">
    <Image
      src={house.img}
      alt="profile"
      objectFit="cover"
      fill
      className="w-full h-full top-0 left-0 object-cover rounded-2xl"
    />
  </div>
</Carousel>

Upvotes: 3

Related Questions