Q&A
javascriptを使ってタッチスワイプまたは、タッチスライドを作りたいと考えています。
バナーを指でスライドさせてスクロールするイメージです。
スマートフォンでの実装を行いたいです。
アマゾンビデオのバナーのような感じにしたいです。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>画像スワイプ</title> 6</head> 7<style> 8 body{ 9 width: 100%; 10 height:auto; 11 margin-top: 80px; 12 } 13 .swip{ 14 width: 100%; 15 height:300px; 16 overflow-x: scroll; 17 -webkit-overflow-scrolling: touch; 18 19 } 20 .inswip{ 21 width:300%; 22 height:100%; 23 } 24 .swi1{ 25 width:33.333%; 26 height: 100%; 27 float:left; 28 } 29</style> 30<body> 31 <div class="swip"> 32 <div class="inswip"> 33 <div class="swi1" style="background:red;"></div> 34 <div class="swi1"style="background:blue;"></div> 35 <div class="swi1"style="background:green;"></div> 36 </div> 37 </div> 38</body> 39</html>
ひな形はできましたが、ここからどうすればよいのかわかりません。
自分なりに調べると、タッチイベントの座標などを使う必要がありそうなのですが、分かる人がいれば、教えていただきたいです。
よろしくお願いします。
Amazonビデオ
回答1件
0
ベストアンサー
ライブラリを使用するのが良いです。
【レスポンシブ対応のjQueryスライダー系ライブラリ × 11選 - ONZE】
http://on-ze.com/archives/4996
投稿2017/06/15 15:18
総合スコア69398
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/06/15 15:42