itemslide.jsで作るモバイル対応スワイプ機能付きスライダーの実装方法

itemslide.jsは、ウェブサイトやアプリケーションにおけるインタラクティブなユーザー体験を実現するための強力なツールです。
この記事では、itemslide.jsを使ってモバイルフレンドリーなスライダーを実装する方法について詳しく解説します。エンジニア初心者から上級者まで、この記事が役立つ内容となっていますので、ぜひ参考にしてください。

itemslide.jsの概要

itemslide.jsは、タッチ操作に対応したスライダーを簡単に実装できるJavaScriptライブラリです。特に、スマートフォンやタブレットなどのモバイルデバイスでの使用に最適化されており、上下左右のスワイプ、スクロール、クリックによるスライド操作をサポートします。

スライダーのCSS設定

スライダーを表示するためのCSSは、視覚的な美しさと操作性を兼ね備えることが重要です。以下は、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>

HTML構造

スライダーのHTML構造は、以下のようにシンプルに保つことができます。スライドエリア（id=”scrolling”、ul）内にスライドさせるliタグを複数用意します。
各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>

JavaScriptの実装

jquery-3.6.4.min.js、itemslide.min.jsファイルを読み込みます。$(“スライドエリア”).itemslide({オプション})を記述します。オプションにスワイプ可否等の設定を行います。itemslide.jsのJavaScriptコードは、以下のように記述します。これにより、スライダーの動作が有効化され、リサイズ時の再読み込みもサポートされます。

<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の公式サイトも参照してください。

ItemSlide.js – JavaScript touch carousel

まとめ

itemslide.jsを利用することで、モバイルフレンドリーなインタラクティブなスライダーを簡単に実装することができます。このライブラリは、特にタッチ操作を多用するモバイルデバイスに最適です。本記事で紹介した手順を参考に、あなたのウェブサイトやアプリにも応用してみてください。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。