是否可以以编程方式触发 click/drag 事件以启动轮播移动

Question

我需要创建一个可拖动的自由滚动旋转木马，我可以使用 http://flickity.metafizzy.co/ or http://idangero.us/swiper/ 之类的东西来完成。然而，这些都不允许我指定初始运动。是否可以在这些旋转木马上模拟点击拖动到 'give them a spin'？

类似于：

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

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

更新 2 我希望它像您抓住它并轻轻旋转一样开始移动。但我不希望它像 'autoPlay' 那样自动前进。不幸的是，Flickerty 没有提供这样的配置。

Answer 1

如果我没理解错的话，您想在加载时进行初始移动。

我试过在插件初始化时将自动播放设置为特定值，如下所示：

$('.home-map-wrapper').flickity({
  autoPlay: 1000,
  freeScroll: true,
  wrapAround: true,
  prevNextButtons: false,
  pageDots: false,
  freeScrollFriction: 0.00
});

勾选这个Fiddle

Answer 2

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

您可以简单地：

检索您的 Flickity 实例
为轮播指定速度
指定您处于自由滚动模式（而不是向特定位置滚动）
启动动画

代码

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/

是否可以以编程方式触发 click/drag 事件以启动轮播移动

Is it possible to programatically trigger click/drag events in order to start a carousel moving

javascript

jquery

flickity

代码

Fiddle