Question

我需要创建一个可拖动的自由滚动旋转木马，我可以使用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创造了一个小提琴来演示。我该如何进行初步运动？ https://jsfiddle.net/sprintstar/b34w9uec/

更新2 我想让它最初移动，就像你已经抓住它并轻轻旋转一样。但我不想让它自动前进，就像'autoPlay'一样。不幸的是，Flickerty没有提供这样的配置。

Answer 1

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

你可以简单地说：

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

代码

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]
}

小提琴

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

Answer 2

如果我理解正确，你想在负载上进行初始移动。

我尝试在插件初始化时将autoPlay设置为特定值，如下所示：

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

选中此Fiddle

是否可以以编程方式触发单击/拖动事件以启动旋转木马移动

2 个答案:

代码

小提琴