在轮播上捕捉特定事件

Question

我正在尝试制作轮播并捕捉一些特定用户对自定义事件的幻灯片移动的操作。

幻灯片恢复
触摸动作中

我尝试使用 slick，但 slick 的自定义事件未按我预期触发。这是我试过的代码。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi">
 <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css"/>
 <link rel="stylesheet" type="text/css" href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css"/>
 <style type="text/css">
  .slider {
   width: auto;
   margin: 30px 50px 50px; }
 
  .slick-slide {
   background: #3a8999;
   color: white;
   padding: 40px 0;
   font-size: 30px;
   font-family: "Arial", "Helvetica";
   text-align: center; }
 
  .slick-prev:before, .slick-next:before {
   color: black; }
 
  .slick-dots {
   bottom: -30px; }
 
  .slick-slide:nth-child(odd) {
   background: #e84a69; }
 
 </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>
</head>
<body>

<section class="slider">
 <div>slide1</div>
 <div>slide2</div>
 <div>slide3</div>
 <div>slide4</div>
 <div>slide5</div>
 <div>slide6</div>
</section>

<div id="log" style="height:300px;overflow-y:auto"></div>

<script>
 $(".slider").slick({
  autoplay: false,
  dots: true
 }).on("afterChange beforeChange edge init reInit setPosition swipe breakpoint", handler);

 function handler(event, slick, direction) {
  var $log = $("#log");
  event.type == "beforeChange" && $log.html("");

  $log.html(event.type +"<br>"+ $log.html());
 }
</script>
</body>
</html>

没有还原事件

当 slide 未达到 touchThreshold 条件时，slide 将返回到最后一个位置，但事件将按以下顺序触发。

beforeChange -> afterChange -> setPosition

而对于正常的幻灯片移动，事件的触发方式如下：

beforeChange -> swipe -> afterChange -> setPosition

唯一的区别是 'swipe'。为了区分正常走法和恢复走法，我需要从那个差异中弄清楚这是一件乏味的工作。

无法捕捉用户的触摸动作

当用户在触摸过程中移动幻灯片时，there's no custom events firing 在那时候。事件在触摸结束后立即触发。

我的问题是推荐哪些基于jQuery的轮播插件满足上述条件？

Answer 1

备选方案之一是 egjs 基于 jQuery 的轻弹组件。您可以在 http://naver.github.io/egjs/demo/flicking/

查看基本演示

这是示例工作演示代码：

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi">
 <style type="text/css">
  .slider{height:130px;background-color:grey}
  .eg-flick-panel {font-size:2em;text-align:center}
 </style>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/egjs/1.1.0/pkgd/flicking.pkgd.min.js"></script>
</head>
<body>

<section class="slider">
 <div id="item1" style="background-color:#CC66CC">
  <p>slide1</p>
 </div>
 <div id="item2" style="background-color:#66cccc">
  <p>slide2</p>
 </div>
 <div id="item3" style="background-color:#ffc000">
  <p>slide3</p>
 </div>
 <div id="item3" style="background-color:#f5871f">
  <p>slide4</p>
 </div>
 <div id="item3" style="background-color:#66ff66">
  <p>slide5</p>
 </div>
 <div id="item3" style="background-color:#8a6d3b">
  <p>slide6</p>
 </div>
</section>

<div id="log" style="height:300px;overflow-y:auto"></div>

<script>
 new eg.Flicking(".slider", {
  duration: 300,
  circular: true
 }).on({
  beforeFlickStart: handler,
  flick: handler,
  flickEnd: handler,
  beforeRestore: handler,
  restore: handler
 });

 function handler(event) {
  var $log = $("#log"), direction = { "2": "&larr;", "4": "&rarr;" };

  /^before/.test(event.eventType) && $log.html("");
  $log.html(event.eventType +": "+ direction[event.direction] +"<br>"+ $log.html());
 }
</script>
</body>
</html>

恢复事件

正如您注意到的运行上面的代码，当幻灯片未移动超过阈值时，恢复事件将按以下顺序触发：

beforeRestore -> flick ... flick -> restore

触摸动作

并且在触摸面板移动期间，会触发多个 flick 事件，与您的移动次数一样多，您还可以使用事件参数值确定移动方向。

事件按以下顺序触发：

(during the touch down moves) flick ... flick -> (when touch is up) beforeFlickStart -> flick ... flick -> flickEnd

希望这能回答您的问题。

在轮播上捕捉特定事件

Catching specific event on carousel

jquery

carousel

slick.js