Используется реагирующая мультикарусель, но невозможно использовать пользовательские точки - PullRequest
Новая
       25

Используется реагирующая мультикарусель, но невозможно использовать пользовательские точки

3 голосов
/ 22 апреля 2020

Как я могу получить кликабельные пользовательские точки этой карусели. Я не могу связать событие щелчка в элементе списка, чтобы переместить карусель. Мне нужна правильная реализация между onClick и элементом li, чтобы щелкнуть на элементах prev и next в карусели

Полный код в ссылке 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>
  );
};

Ответы [ 2 ]

1 голос
/ 24 апреля 2020 
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>
);

Рабочая демонстрация: https://codesandbox.io/s/react-multi-carousel-customdot-3q0f4?file= / src / App. js: 683-1052

1 голос
/ 22 апреля 2020

Проблема в том, что плагин ожидает получения одного элемента (например, li) как CusomtDot, но вы передаете список (ol с некоторыми дочерними элементами).

Решение, передать один элемент, как это: 

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>
  );
};

Рабочая демонстрация: https://codesandbox.io/s/react-multi-carousel-customdot-jwkfo

...