itemslide.jsを使って上下左右スワイプ対応のモバイルフレンドリーなスライダーを表示する方法をご紹介します。
スライダーが上下左右スワイプ、スクロール、クリックすると左右にスライドします。
Contents
ディスプレイ広告
itemslide.jsを使って上下左右スワイプ対応のモバイルフレンドリーなスライダーを表示するCSS記述
※スライドエリア(#scrolling、ul、li、.itemslide-active)のCSS記述です。必要に応じて変更して下さい。
<style> body { font-size: 16px; text-align: center; } h1{ text-align: center; font-size: 20px; padding: 20px 0 0 0; line-height: 1.8em; } #scrolling { position:fixed; top:28%; background: #333333; height: 34%; width: 100%; overflow: hidden; } ul { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin: 0; padding: 0; position: absolute; margin-top:4vh; height:80%; list-style-type: none; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } li { font-size:8vmin; float: left; width:25vw; min-width: 250px; height: 100%; color: #333333; font-weight: 300; text-align: center; border-radius: 30px; -webkit-border-radius: 30px; -o-border-radius: 30px; -moz-border-radius: 30px; cursor: pointer; background: #FFF; -webkit-transform: scale(0.95); -ms-transform: scale(0.95); -moz-transform: scale(0.95); transform: scale(0.95); } .itemslide-active { -webkit-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } </style>
itemslide.jsを使って上下左右スワイプ対応のモバイルフレンドリーなスライダーを表示するHTML記述
※スライドエリア(id=”scrolling”、ul)内にスライドさせるliタグを複数用意します。
<h1>itemslide.jsを使って上下左右スワイプ対応のモバイルフレンドリーなスライダーを表示<br>以下、上下左右スワイプ、スクロール、クリックするとスライドします。</h1> <div id="scrolling"> <ul> <li>左右スワイプ</li> <li>上下スワイプ</li> <li>スクロール</li> <li>クリック</li> <li>モバイルフレンドリー</li> <li>Swipe</li> <li>Swipe Up</li> <li>Scroll</li> <li>Click to Slide</li> <li>Mobile Friendly</li> </ul> </div>
itemslide.jsを使って上下左右スワイプ対応のモバイルフレンドリーなスライダーを表示するJavaScriptの記述
※jquery-3.6.4.min.js、itemslide.min.jsファイルを読み込みます。$(“スライドエリア”).itemslide({オプション})を記述します。オプションにスワイプ可否等の設定を行います。
<script src="jquery-3.6.4.min.js"></script> <script src="itemslide.min.js"></script> <script> var carousel; $(document).ready(function () { carousel = $("#scrolling ul"); carousel.itemslide({ swipe_out: true, remove_deprecated_external_functions: true }); $(window).resize(function () { carousel.reload(); }); }); </script>
itemslide.jsを使って上下左右スワイプ対応のモバイルフレンドリーなスライダーを表示するデモページ
itemslide.jsを使って上下左右スワイプ対応のモバイルフレンドリーなスライダーを表示するデモページ
ソース元:ItemSlide.js – JavaScript touch carousel
ItemSlide.js – JavaScript touch carousel
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。