首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >可能是一个简单的解决方案-重置Flickity幻灯片香草JS

可能是一个简单的解决方案-重置Flickity幻灯片香草JS
EN

Stack Overflow用户
提问于 2020-03-18 18:44:37
回答 1查看 930关注 0票数 0

在我的投资组合中,我使用Flickity。在单击单个瓷砖时,打开带有滑块的模式。每个触发器都会打开相同的Flickity滑块,但会更改单元格的图像src。到目前一切尚好。但是如果我用第一个触发器打开滑块,比如滑动2和关闭它,触发器2,3,4等等在幻灯片2打开。因此,我需要重新设置滑块或跳转到幻灯片1当我关闭模态。我认为这种情况应该发生在“隐藏者()”中。我已经尝试过"flkty.reloadCells();",但是它不起作用。非常感谢你的帮助。

我的香草 JS

代码语言:javascript
运行
复制
//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";
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-03-25 15:20:04

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

  1. 没有定义var "flkty“。

var flkty = new Flickity(".carousel");

flkty.select(0, false, true);

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/60745703

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档