Custom Arrows

[usahai]

Prerequisite

Before you submit a feature request or report a bug to be fixed, make sure you have stared this repository. A donation is also welcomed

Describe the bug I cannot get custom arrows to show up no matter what

To Reproduce Override the existing buttons with the exposed CustomLeftArrow and CustomRightArrow implementations

Expected behavior Arrows in red color should show up

Additional context I have tried it with a div, button and IconButton component, but it doesn't show up. So far, my sandbox is a JS implementation - although I will eventually need a TS/TSX implementation, I figured that there is an issue with my TS implementation, so I tried it in a sandbox with a JS implementation, but that didn't work either. Would be nice to have a working sample in a sandbox to show how to override the arrow components, because the existing sample on the website (sort of a copy-paste mechanism) isn't translating.

I also tried to do the forwardRef method mentioned /issues/235, but to no avail.

I also understand that this issue has been brought up before, but I couldn't find a working solution.

Reproduction https://codesandbox.io/s/laughing-platform-43ktv?file=/src/App.js

[usahai]

Just to help this along, for the TS side of things, this is the implementation and error (I edited some stuff out, but by and large this is it):

import Carousel from 'react-multi-carousel'
import 'react-multi-carousel/lib/styles.css'
import { ArrowProps } from 'react-multi-carousel/lib/types'
import { responsive } from 'constants/carousel'
import { FaChevronLeft, FaChevronRight } from 'react-icons/fa'

interface CustomLeftArrowProps extends ArrowProps {
  myOwnStuff: string
}
interface CustomRightArrowProps extends ArrowProps {
  myOwnStuff: string
}
const CustomLeftArrow = ({ onClick }: CustomLeftArrowProps) => {
  return (
    <button onClick={onClick}>
      <FaChevronLeft />
    </button>
  )
}

const CustomRightArrow = ({ onClick }: CustomRightArrowProps) => {
  return (
    <button onClick={onClick}>
      <FaChevronRight />
    </button>
  )
}

const myCarouselComponent: React.FC<IProps> = () => {
  return (
    <Carousel
          responsive={responsive}
          slidesToSlide={5}
          customLeftArrow={<CustomLeftArrow />}
          customRightArrow={<CustomRightArrow />}
          renderButtonGroupOutside
        >
          {data.map((item) => (
            <div
              key={contract.id}
              className={styles.card}
            >
              <DataCard item={item} />
            </div>
          ))}
        </Carousel>
  )
}

It can't find the onClick function to forward to the component. Same error pops up if no interface is defined.

[ssomlk]

I am having the same issue. Custom arrows are not showing up.

[YIZHUANG]

Why don't you pass myOwnStuff as the prop?

[Crepkey]

I am having the same issue. It does not matter what I passed to the customArrowLeft / right props. The passed JSX does not showing up. Any solution?

[Andresbd]

@Crepkey @usahai Had same issue but seems like you have to add custom styles for your button, I give you an example of a functional Carousel. I have found this solution with the help of the CodeSandbox of Mosh Feu at StackOverflow.

<Carousel
      arrows
      containerClass="container"
      customLeftArrow={
        <FontAwesomeIcon
          icon={faChevronLeft as IconProp}
          size="lg"
          className="absolute top-1/2 left-4 max-w-4 cursor-pointer text-primary-400"
        />
      }
      customRightArrow={
        <FontAwesomeIcon
          icon={faChevronRight as IconProp}
          size="lg"
          className="absolute top-1/2 right-4 max-w-4 cursor-pointer text-primary-400"
        />
      }
      slidesToSlide={1}
      swipeable
   >

This is an example of Tailwind css but the components must be on position absolute with left and right respectively and a min width. Hope you guys find it usefull

[InceptionCode]

@Crepkey @usahai Had same issue but seems like you have to add custom styles for your button, I give you an example of a functional Carousel. I have found this solution with the help of the CodeSandbox of Mosh Feu at StackOverflow.

<Carousel
      arrows
      containerClass="container"
      customLeftArrow={
        <FontAwesomeIcon
          icon={faChevronLeft as IconProp}
          size="lg"
          className="absolute top-1/2 left-4 max-w-4 cursor-pointer text-primary-400"
        />
      }
      customRightArrow={
        <FontAwesomeIcon
          icon={faChevronRight as IconProp}
          size="lg"
          className="absolute top-1/2 right-4 max-w-4 cursor-pointer text-primary-400"
        />
      }
      slidesToSlide={1}
      swipeable
   >

This is an example of Tailwind css but the components must be on position absolute with left and right respectively and a min width. Hope you guys find it usefull

This did help. It is very unfortunate that you have to do this, though. Thanks for adding this workaround.

[usahai]

Closing this since it's resolved. Many thanks @Andresbd