jquery - 将 Flickity 重置回幻灯片 1
问题描述
我正在尝试在 10 秒不活动后将滑块重置回第一张幻灯片。我这样做的方式确实将幻灯片踢回幻灯片 1,但是当我滑到下一张幻灯片时,它会踢回上一张下一张幻灯片而不是幻灯片 2。
我已经尝试通过更改 css 属性来处理它,这确实将其带回幻灯片 1,但没有清除下一张幻灯片以从 1 重新开始
您可以在以下笔上查看我的代码:https ://codepen.io/anon/pen/yZvOGJ
idleTimer = null;
idleState = false;
idleWait = 2000;
$(document).ready(function () {
$('*').bind('mousemove keydown scroll', function () {
clearTimeout(idleTimer);
idleState = false;
idleTimer = setTimeout(function () {
// Idle Event
$("div.flickity-slider").attr({
style: "transform: translateX(0%);"
});
$("div.carousel-cell:not(:first)").removeClass("is-selected").attr("aria-hidden", "true");
$("div.carousel-cell:first").addClass("is-selected").attr("aria-hidden","false" );
idleState = true; }, idleWait);
});
$("body").trigger("mousemove");
});
我试过浏览 flickity 网站上的事件部分,但我无法将 2 和 2 放在一起。任何帮助表示赞赏。
解决方案
经过一些咖啡和更多的试验和错误后想通了;我会发布答案而不是删除我的问题,以防其他人遇到问题。
// external js: flickity.pkgd.js
idleTimer = null;
idleState = false;
idleWait = 2000;
$(document).ready(function () {
$('*').bind('mousemove keydown scroll', function () {
clearTimeout(idleTimer);
idleState = false;
idleTimer = setTimeout(function () {
// Idle Event
var $carousel = $('.carousel').flickity()
.flickity( 'select', 0 );
idleState = true; }, idleWait);
});
$("body").trigger("mousemove");
});
推荐阅读
- xml - 如何在 XSLT 中获得前 3 个结果
- java - 获取 java.lang.IndexOutOfBoundsException: Index: 0, Size: 0 in react native
- jmeter - 确定性能测试场景
- node.js - 使用 Node.js 连接到 SQL Server 不起作用
- ios - 当我在后台时打开哪个应用程序?
- javascript - 多重数据过滤
- javascript - 在javascript中突出显示文本按钮
- python - 如何在 python 虚拟环境中安装 rasa x - 使用 pip3 的 Rasax 安装错误
- c# - 使用像大纲步骤这样的背景步骤
- gnuplot - GNUPLOT - 如何检查是否设置了“multiplot”