LoginSignup
2
0

More than 3 years have passed since last update.

Swipe.js スライド時にイベントを発火させる

Last updated at Posted at 2020-01-16

Swipe.jsでiphoneライクなTimepickerを実装したので共有します。
出来上がりイメージ図はスクリーンショット 2020-01-16 19.50.25.png
こんな感じです。
コードはこちらから確認できます。
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
};

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0