Переместите ползунок в карусель с реагированием на щелчки при нажатии на следующее / предыдущее изображение.

Question

Я использую centerMode: true и добавляю background-color для неактивных изображений. Мне нужно движение по клику предыдущего / следующего неактивного изображения, чтобы карусель должна была двигаться соответственно.

 const settings = {
    dots: false,
    slidesToShow: 1,
    autoplay: false,
    centerMode: true,
    variableWidth: true,
    nextArrow: <NextArrow />,
    prevArrow: <PreviousArrow />,
  };

const NextArrow = ({ onClick }) => (
  <span className="next" onClick={onClick}></span>
);
const PreviousArrow = ({ onClick }) => (
    <span className="prev" onClick={onClick}></span>
);

В настоящее время навигация осуществляется только по стрелкам, а не по клику на предыдущее / следующее изображение. .

РЕДАКТИРОВАТЬ - для изображений назначено собственное событие щелчка.

Answer 1

Один из подходов заключается в том, чтобы вызывать slickNext или slickPrev при нажатии на ваши изображения.

Вы упоминаете о существующем слушателе события click, связанном с изображениями, вы можете добавить вызов метода slick в этот вызов и использовать слайд Индекс сравнивается с активным индексом, чтобы узнать, следует ли запускать slickNext или slickPrev.

https://react-slick.neostack.com/docs/example/previous-next-methods/

Answer 2

Вы можете использовать следующую библиотеку для реализации карусели в reactjs: библиотека slick

prevArrow

<button type="button" class="slick-prev">Previous</button>

Позволяет выбрать узел или настроить HTML для стрелки «Назад».

nextArrow

<button type="button" class="slick-next">Next</button>

Позволяет выбрать узел или настроить HTML для стрелки «Далее».