「ScrollHint」は、横スクロール可能な場合にヒントを表示するJavaScriptライブラリです。
設定すると、コンテンツに横スクロール可能であることがわかるアイコンとテキストが以下のように表示されます。
<div class="main-scroll-box">
<ul class="main-scroll">
<li class=""><img src="https://autoproject.nagoya/wp-content/uploads/img9.png" alt=""></li>
<li class=""><img src="https://autoproject.nagoya/wp-content/uploads/img10.png" alt=""></li>
<li class=""><img src="https://autoproject.nagoya/wp-content/uploads/grid3-scaled.jpg" alt=""></li>
<li class=""><img src="https://autoproject.nagoya/wp-content/uploads/grid2-scaled.jpg" alt=""></li>
</ul>
</div>.main-scroll{
display: flex;
}
.main-scroll-box{
max-width: 800px;
margin: 50px auto;
overflow-x: scroll;
}
img{
aspect-ratio:300/300;
object-fit: cover;
max-width: 300px;
}※new ScrollHint(”)には、任意のクラス名を入れてください。今回は、.main-scroll-boxのクラス名を入れています。
<script>
window.onload = function() {
new ScrollHint('.main-scroll-box', {
scrollHintIconAppendClass: 'scroll-hint-icon-white',//背景を白にする
i18n: {
scrollable: '横スクロールできます'//テキストを変更
}
});
}
</script>設定は以上です！ ぜひ試してみてください！
株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。
サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。
