- 記事公開日
無限ループするフォトギャラリーをスワイプで操作したい
ウェブサイトに複数の画像を埋め込んでフォトギャラリーみたいな実装がしたいの。
自動で横スクロールして少しずつ表示させてるんだけど、スマホで見ている人は、スワイプ操作でシュッと一気に見れた方が良い気がして・・・
どうすればいい？
CSSでスクロールバーを消さなければ良いだけの話ですよ！
※今回の例はスマホで見たときにスワイプ操作を行う方法です。
パソコンで見たときはスクロールバーは表示されます。
もしパソコンでスクロールバーを消す場合は、メディアクエリで「overflow-x:scroll;」のところを「overflow:hidden」と指定してください。
薄いグレーでスクロールバーが表示されますが、数秒で消えます。
実際に実装してみると、ほとんど目立ちません。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex">
<title>フォトギャラリー</title>
<style>
.slideshow {
overflow-x:scroll;
display:flex;
align-items:center;
}
.slideshow ul {
display:flex;
list-style-type:none;
}
/* フォトギャラリー */
.slideshow ul li {
width:20rem;
height:auto;
margin-right:1rem;
}
.slideshow ul li img {
max-width:100%;
height:auto;
}
</style>
</head>
<body>
<div id="container">
<!-- ==========================================
スライドショー
============================================ -->
<div class="slideshow" id="gallery">
<ul>
<li><img src="img1.jpg"></li>
<li><img src="img2.jpg"></li>
<li><img src="img3.jpg"></li>
<li><img src="img4.jpg"></li>
<li><img src="img5.jpg"></li>
<li><img src="img6.jpg"></li>
<li><img src="img7.jpg"></li>
</ul>
</div>
<script>
const gallery = document.getElementById("gallery");
const scrollAmount = 1; // スクロールする量（ピクセル単位）
const scrollInterval = 15; // スクロールの間隔（ミリ秒単位）
let isTouching = false; // スワイプ中かどうかを判定するフラグ
let scrollDistance = 0; // スクロールした距離
// ギャラリーを自動でスクロールさせる関数
function autoScroll() {
if (!isTouching) { // スワイプ中でない場合にのみ自動スクロールを実行
gallery.scrollLeft += scrollAmount;
scrollDistance += scrollAmount;
// ギャラリーの端に達したらスクロールを最初の位置に戻す
if (gallery.scrollLeft >= gallery.scrollWidth - gallery.clientWidth) {
gallery.scrollLeft = 0;
scrollDistance = 0;
}
}
}
// タッチイベントを検知してフラグを設定
gallery.addEventListener('touchstart', () => {
isTouching = true;
});
gallery.addEventListener('touchend', () => {
isTouching = false;
});
// 一定の間隔でautoScroll関数を呼び出す
setInterval(autoScroll, scrollInterval);
</script>
</div>
</body>
</html>
本当は、最後の画像まで表示されたら切れ目なく無限ループを表現したかったのですが、どうしてもダミー画像を表示する必要があります。
そうなると、見ているユーザーに重複した画像を見せることになってしまうので、今回は最初に画像が戻るときの違和感はあきらめました。