スワイプスライダーをCSS TranscormとネイティブJavascriptで開発

• CSSのtransform を使ってスライダーを制作しました。
  下記のサンプルはちょっと複雑なサイトへ実装したサンプルです。
  
  舞踏派スライダー | 実践版：https://labo.studio-happyvalley.com/paraScroll/circle/?scrollY=2000

画像の縦横比はフリー

• ・画像の縦横比はフリーです。どのような比率でもサイズでも実装できます。
  ・スワイプでスクロールできます。
  ・シンプルにしたかったので左右の矢印ボタン以外は実装してません。
  ・面倒だったのでプラグイン化もしてません。（汗）
  ・一応初期設定でオートプレイも設定できます。
  
  舞踏派スライダー基礎：https://labo.studio-happyvalley.com/swipeSlider/def/

• しくみは、touchmove,mousemoveでリアルタイムに座標を取得しCSSのtransreteでその座標へ移動させ（この移動はアニメーションは未使用）、touchend,mouseupで画像幅ごとの座標へtransitionでアニメーションさせています。
  JSだとpositon値を使用しますがCSS3なので(MDNによると)デカルト座標とやらを使用するそうです。そのため慣れないと、両者がごっちゃになります。

• スライダーも最近は使っているサイトが少なくなってきました。
  とはいっても普通に便利です。
  仕事でサムネイルを表示するタイプも制作しました。
  
  舞踏派スライダー | 品定め版：https://labo.studio-happyvalley.com/swipeSlider/swipeSliderThumb/