网络摄像头进入 Slick Slider

Question

我正在使用 Slick Slider 使用模板生成动态表单，其中一个包含网络摄像头插件。

一切正常，但例如，如果幻灯片 4 包含网络摄像头模板，页面会在幻灯片 0 的开头询问我是否要禁用或启用我的网络摄像头。

所以，这是一种在我在幻灯片 4（或 5...）上时加载网络摄像头插件的方法？

我尝试使用 JQuery 方法 .hasClass 但它不起作用：

if ($('div.slick-slide').hasClass('slick-active') == true) {
enableWebcam();}

Answer 1

尝试使用 slick.js onBeforeChange 事件在相关幻灯片处于活动状态时做出反应：

$('.your-slides-class').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  if (nextSlide == 3) {
    enableWebcam();
  }
});

请注意幻灯片索引从 0 开始，因此 "nextSlide ==3" 指的是第四张幻灯片。此外，当然，您应该将“.your-slides-class”替换为... class 或用于启动滑块的 id

Answer 2

因此，为了修复它，这是我所做的：

生成带有网络摄像头插件(webcam.js)的模板时，我在幻灯片中添加了一个名为webcamPlugin的class。
我添加了一个功能afterChange来检查当前幻灯片的ID，所以div.slick-active div.row与带有网络摄像头插件的幻灯片具有相同的ID。
如果是，我启用网络摄像头插件。

Webcam into Slick Slider