4

我需要创建一个可拖动的自由滚动轮播，我可以使用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 我希望它最初能像你抓住它并轻轻旋转一样移动。但我不希望它自动前进，就像“自动播放”一样。不幸的是，Flickerty 没有提供这样的配置。

4

2 回答 2

4

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

您可以简单地：

  1. 检索您的 Flickity 实例
  2. 为您的轮播指定速度
  3. 指定您处于 freeScrolling 模式（而不是向特定位置滚动）
  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]
}

小提琴

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

于 2016-03-09T01:36:52.353 回答
1

如果我理解正确，您希望在负载上进行初始运动。

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

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

检查这个小提琴

于 2016-03-08T09:43:18.543 回答