Swipe.jsでiphoneライクなTimepickerを実装したので共有します。
出来上がりイメージ図は
こんな感じです。
コードはこちらから確認できます。
Timepicker using Swiper.js
公式ドキュメントはあまり参考ならなかったです。(わたし的に)
Swiper
補足
iphoneライクに指でスワイプできるようにすると
どうしてもイベントが発火しなかったので、
泣く泣く指スワイプは外しました。
(実装に成功した方は是非教えていただきたい)
ちなみに指スワイプを実装したコードは以下になります。
index.js
var defaults = {
pagination: '.swiper-pagination',
slidesPerView: 3,
freeMode: true,
freeModeSticky: true,
freeModeMomentumRatio: 0.25,
freeModeVelocityRatio: 0.25,
freeModeMinimumVelocity: 0.1,
mousewheelControl: true, <-- こいつと、
mousewheelSensitivity: 0.5, <-- こいつを実装する。
loop: true,
loopAdditionalSlides: 5,
direction: 'vertical',
slideToClickedSlide: true,
centeredSlides: true
};