可能是一个简单的解决方案 - Reset Flickity Slides Vanilla JS

Question

对于我的作品集，我使用的是 Flickity。单击单个图块时，将打开一个带有滑块的模式。每个触发器都会打开相同的 Flickity 滑块，但会更改单元格的图像 src。到目前为止，一切都很好。但是如果我用第一个触发器打开滑块并滑动例如滑动 2 并关闭它，触发器 2、3、4 等等在幻灯片 2 上打开。因此，我需要重置滑块或跳转到幻灯片 1我关闭模态。我认为这应该发生在 "hideslider()"。我已经尝试过 "flkty.reloadCells();"，但它不起作用。非常感谢你的帮助。

我的原版JS

//get modal and flickity cells
var modal = document.getElementById("modal");
var cell1 = document.getElementById("cell1");
var cell2 = document.getElementById("cell2");
var cell3 = document.getElementById("cell3");
var cell4 = document.getElementById("cell4");

// Slider 01
var trigger1 = document.getElementById("trigger1");
trigger1.onclick = function() {
  cell1.src = "./_mat/gallery2/g2p1.png";
  cell2.src = "./_mat/portfolio_g1_t1_c2.jpg";
  cell3.src = "./_mat/portfolio_g1_t1_c3.jpg";
  cell4.src = "./_mat/portfolio_g1_t1_c4.jpg";
  showSlider();
};

// Slider 02
var trigger2 = document.getElementById("trigger2");
trigger2.onclick = function() {
  cell1.src = "./_mat/gallery2/g2p2.png";
  cell2.src = "URL";
  cell3.src = "URL";
  cell4.src = "URL";
  showSlider();
};

///////////////I've removed Slider 3-7 ;)

// Slider 08
var trigger8 = document.getElementById("trigger8");
trigger8.onclick = function() {
  cell1.src = "URL";
  cell2.src = "URL";
  cell3.src = "URL";
  cell4.src = "URL";
  showSlider();
};

// Slider 9
var trigger9 = document.getElementById("trigger9");
trigger9.onclick = function() {
  cell1.src = "URL";
  cell2.src = "URL";
  cell3.src = "URL";
  cell4.src = "URL";
  showSlider();
};

//function to hide modal and overlay
function hideSlider() {
  dark.style.visibility = "hidden";
  modal.style.visibility = "hidden";
  document.body.style.overflowY = "visible";
  flkty.reloadCells();
}

//function to show modal and overlay
function showSlider() {
  dark.style.visibility = "visible";
  modal.style.visibility = "visible";
  document.body.style.overflowY = "hidden";
}

Answer 1

经过几天的深思熟虑，我找到了解决办法。

变量 "flkty" 未定义。

var flkty = new Flickity(".carousel");
最后，我对 select 第一个单元格使用了以下解决方案。在此处找到 API 文档：https://flickity.metafizzy.co/api.html

flkty.select(0, false, true);

可能是一个简单的解决方案 - Reset Flickity Slides Vanilla JS

Probably a simple solution - Reset Flickity Slides Vanilla JS

javascript

slider

slideshow

flickity