Javascript 可能是一个简单的解决方案-重置Flickity
对于我的投资组合,我使用Flickity。单击单个平铺时,将打开带有滑块的模式。每个触发器都会打开相同的Flickity滑块,但会更改单元格的图像src。到现在为止,一直都还不错。但是如果我用第一个触发器打开滑块,然后滑动,例如滑动到第二个滑块,然后关闭它,触发器2,3,4,等等,在第二个滑块上打开。因此,当我关闭模式时,我需要重置滑块或跳到滑块1。我认为这应该发生在“hideslider()”中。我已经尝试过“flkty.reloadCells();”,但它不起作用。非常感谢你的帮助 我的香草Javascript 可能是一个简单的解决方案-重置Flickity,javascript,slider,slideshow,flickity,Javascript,Slider,Slideshow,Flickity,对于我的投资组合,我使用Flickity。单击单个平铺时,将打开带有滑块的模式。每个触发器都会打开相同的Flickity滑块,但会更改单元格的图像src。到现在为止,一直都还不错。但是如果我用第一个触发器打开滑块,然后滑动,例如滑动到第二个滑块,然后关闭它,触发器2,3,4,等等,在第二个滑块上打开。因此,当我关闭模式时,我需要重置滑块或跳到滑块1。我认为这应该发生在“hideslider()”中。我已经尝试过“flkty.reloadCells();”,但它不起作用。非常感谢你的帮助 我的香草
//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";
}
经过几天的过度思考,我找到了解决办法
var flkty=新的Flickity(“.carousel”)代码>
flkty.select(0,false,true)代码>