我正在嘗試使旋轉木馬和捕捉某些特定用戶對幻燈片移動的自定義事件的操作。在傳送帶上捕捉特定事件
- 幻燈片恢復
- 觸摸時移動
我試着用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">
\t <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css"/>
\t <link rel="stylesheet" type="text/css" href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css"/>
\t <style type="text/css">
\t \t .slider {
\t \t \t width: auto;
\t \t \t margin: 30px 50px 50px; }
\t
\t \t .slick-slide {
\t \t \t background: #3a8999;
\t \t \t color: white;
\t \t \t padding: 40px 0;
\t \t \t font-size: 30px;
\t \t \t font-family: "Arial", "Helvetica";
\t \t \t text-align: center; }
\t
\t \t .slick-prev:before, .slick-next:before {
\t \t \t color: black; }
\t
\t \t .slick-dots {
\t \t \t bottom: -30px; }
\t
\t \t .slick-slide:nth-child(odd) {
\t \t \t background: #e84a69; }
\t
\t </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
\t <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>
</head>
<body>
<section class="slider">
\t <div>slide1</div>
\t <div>slide2</div>
\t <div>slide3</div>
\t <div>slide4</div>
\t <div>slide5</div>
\t <div>slide6</div>
</section>
<div id="log" style="height:300px;overflow-y:auto"></div>
<script>
\t $(".slider").slick({
\t \t autoplay: false,
\t \t dots: true
\t }).on("afterChange beforeChange edge init reInit setPosition swipe breakpoint", handler);
\t function handler(event, slick, direction) {
\t \t var $log = $("#log");
\t \t event.type == "beforeChange" && $log.html("");
\t \t $log.html(event.type +"<br>"+ $log.html());
\t }
</script>
</body>
</html>
有沒有恢復活動
滑動時沒有達到touchThreshold條件,幻燈片要回的最後一個位置,但事件如下順序打響。
beforeChange -> afterChange -> setPosition
而對於正常滑動移動,事件被觸發,如:
beforeChange -> swipe -> afterChange -> setPosition
唯一的區別是 '滑動'。爲了區分正常移動和恢復移動,我需要從中找出差異,這是一件乏味的工作。
有沒有辦法趕上用戶的觸摸在那個點上移
當用戶移動觸摸滑動時,there's no custom events firing 。 事件觸發後立即觸發。
我的問題是什麼是基於jQuery的輪播插件推薦哪些符合上述條件?