单击下一个/上一个图像时，将滑块移动到反应光滑的轮播中

Posted 2023-02-25

【中文标题】单击下一个/上一个图像时，将滑块移动到反应光滑的轮播中

【英文标题】：Move the slider in react slick carousel on click on next/prev image

【发布时间】：2020-04-13 05:33:10

【问题描述】：

我正在使用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>
);

目前，导航仅在箭头上，而不是在上一张/下一张图片点击上。

编辑 - 图片上绑定了原生点击事件。

【参考方案1】：

您可以使用以下库在 reactjs 中实现轮播：library slick

上一个箭头

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

允许您为“上一个”箭头选择一个节点或自定义 html。

下一个箭头

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

允许您为“下一步”箭头选择一个节点或自定义 HTML。

【讨论】：

这种方法没有帮助，因为背景图像的大小可能会有所不同，因此我无法通过其他元素为其添加叠加层。

@Hitesh 您目前如何添加叠加层？

【参考方案2】：

一种方法是在单击图像时调用 slickNext 或 slickPrev。

您提到了绑定到图像的现有点击事件侦听器，您可以在该调用中添加 slick 方法调用，并使用与活动索引相比的幻灯片索引来了解是否触发 slickNext 或 slickPrev。

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