舞踏派
スライダースワイプ対応スライダーを
ネイティブJSで開発。

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

• CSSのtransform を使ってスライダーを制作しました。ES6以降のネイティブJSです。
  ※基本このサイトではすべてES6以降、オリジナル開発です。モジュールなど使用している場合は都度記載しています。
  下記のサンプルはちょっと複雑なサイトへ実装したサンプルです。
  
  舞踏派スライダー | 実践版：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/