javascript - 是否可以通过编程方式触发点击/拖动事件以启动轮播移动

标签 javascript jquery flickity

我需要创建一个可拖动的自由滚动旋转木马,我可以用 http://flickity.metafizzy.co/ 之类的东西来做或 http://idangero.us/swiper/ .然而,这些都不允许我指定初始运动。是否可以在这些旋转木马上模拟点击拖动以“让它们旋转”?

类似于:

$('.home-map-wrapper').trigger('mousedown').trigger('mousemove', { clientX: 0, clientY: 0 }).trigger('mousemove', { clientX: 10, clientY: 0 });

更新 1 我用 Flickety 创建了一个 fiddle 来演示。我如何给它一个初始 Action ? https://jsfiddle.net/sprintstar/b34w9uec/

更新 2 我希望它像您捕获它并轻轻旋转一样开始移动。但我不希望它自动前进,就像“自动播放”一样。不幸的是,Flickerty 没有提供这样的配置。

最佳答案

您不必使用事件来使用 flickity 启动轮播,

您可以简单地:

  1. 检索您的 Flickity 实例
  2. 指定轮播的速度
  3. 指定您处于自由滚动模式(而不是向特定位置滚动)
  4. 启动动画

代码

function initFlickety() {
    var flickityElement = $('.home-map-wrapper').flickity({
      freeScroll: true,
      wrapAround: true,
      prevNextButtons: false,
      pageDots: false,
      freeScrollFriction: 0.00
    });
    var flickity = flickityElement.data("flickity"); // [1]
    flickity.velocity = -1; // [2]
    flickity.isFreeScrolling = true; // [3]
    flickity.startAnimation(); // [4]
}

fiddle

https://jsfiddle.net/b34w9uec/6/

关于javascript - 是否可以通过编程方式触发点击/拖动事件以启动轮播移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35770423/

相关文章:

jquery - Flickity 幻灯片标题和幻灯片编号

javascript - 创建 Boggle 游戏 - 将坐标链接到字母

javascript - 使用 Collapse 在 Accordion 上一次打开一个面板

javascript - 当位置从窗口顶部滚动到 85px 时修复 div

jquery - 使用 jQuery 将样式仅应用于 div 中的偶数元素(2、4、6 等)?

javascript - 捕获 flickity 轮播点击事件

javascript - 错误 : Failed to Load Resources - in tomcat

javascript - 如何使用主干将 'this' 传递给事件?

javascript - MVC - 根据下拉列表显示或隐藏 (div) 字段

javascript - 使用 Flickity 在下一张幻灯片上暂停 YouTube 视频