Using react-multi-carousel but unable to use custom dots

Question

How I can get clickable custom dots of this carousel. I cannot bind a click event in the list item to move the carousel. I need a proper implementation between onClick and the li item to click on prev and next items in carousel

Here is the full code in the link codebox

const CustomDot = ({onMove,index,onClick,active}) => {   
   return (
    <ol class="carousel-indicators">
    <li data-target="#main-slide" data-slide-to="0" className={active ? "active" : "inactive"}     
      >How t bind the click event list item
  onClick={() => onClick()}>{React.Children.slide1}</li>
    <li data-target="#main-slide" data-slide-to="1" className={active ? "active" : "inactive"}
  onClick={() => onClick()}>{React.Children.slide2} </li>
    <li data-target="#main-slide" data-slide-to="2" className={active ? "active" : "inactive"}
  onClick={() => onClick()}>{React.Children.slide3} </li>
    </ol>
  );
};

which Carousel plugin are you using? Can you show the code of the carousel itself? Or event better, create a working [sandbox](https://codesandbox.io/s/) — Mosh Feu, Apr 22 '20 at 12:11
https://codesandbox.io/s/morning-wind-giqk7?file=/src/App.js — Pankaj Swami, Apr 22 '20 at 13:11

score 3 · Answer 1 · answered Apr 24 '20 at 03:44

const CustomDot = ({ onMove, index, onClick, active }) => {
  return (
    <li
      className={active ? "active" : "inactive"}
      onClick={() => onClick()}
    >
      <MaximizeIcon />
    </li>
  );
};

const arrowStyle = {
  background: "transparent",
  border: 0,
  color: "#fff",
  fontSize: "80px"
};
const CustomRight = ({ onClick }) => (
  <button className="arrow right" onClick={onClick} style={arrowStyle}>
    <ArrowForwardIcon style={{ fontSize: "50px" }} />
  </button>
);
const CustomLeft = ({ onClick }) => (
  <button className="arrow left" onClick={onClick} style={arrowStyle}>
    <ArrowBackIcon style={{ fontSize: "50px" }} />
  </button>
);

Working demo : https://codesandbox.io/s/react-multi-carousel-customdot-3q0f4?file=/src/App.js:683-1052

score 2 · Accepted Answer · answered Apr 22 '20 at 16:50

2

The problem is that the plugin expects to receive a single element (li for example) as CusomtDot but you pass a list (ol with some children).

The solution, pass a single element, like this:

const CustomDot = ({ onMove, index, onClick, active }) => {
  // onMove means if dragging or swiping in progress.
  // active is provided by this lib for checking if the item is active or not.
  return (
    <li
      className={active ? "active" : "inactive"}
      onClick={() => onClick()}
    >
      {index + 1}
    </li>
  );
};

Working demo: https://codesandbox.io/s/react-multi-carousel-customdot-jwkfo

answered Apr 22 '20 at 16:50

Mosh Feu

28,354
16
88
135

can you also add aclick event follow up if we want to customise the arrows – Pankaj Swami Apr 23 '20 at 08:20
1

They've a good example here - https://github.com/YIZHUANG/react-multi-carousel/blob/master/stories/CustomArrows.js. Let me know if more explanations needed. – Mosh Feu Apr 23 '20 at 09:06
Yeah they have but the implementation still doesn't sets well. I used it's CustomLeftArrow and CustomRightArrow but it didn't worked out. – Pankaj Swami Apr 23 '20 at 12:55
Want to share a codesandbox again ? so I could try to point to the problematic parts – Mosh Feu Apr 23 '20 at 13:20
@MoshFeu I get the error: "Type '{}' is missing the following properties from type '{ onMove: any; index: any; onClick: any; active: any; }" What can i do – duc nguyendinh trung Dec 19 '22 at 02:27
Can you create a codesandbox that shows the error for me? It would be easier for me to investigate.. – Mosh Feu Dec 20 '22 at 13:59

score 0 · Answer 3 · answered Apr 13 '23 at 05:14

you can change the color of active through tailwind

 const CustomDot = ({ onMove, index, onClick, active }: any) => {
    return (
      <li
        className={active ? "text-red-500" : "inactive"}
        onClick={() => onClick()}
      >
        {index + 1}
      </li>
    );
  };

Using react-multi-carousel but unable to use custom dots

3 Answers3