itemslide.jsを使って上下左右スワイプ対応のモバイルフレンドリーなスライダーを表示する方法｜DAD UNION

itemslide.jsを使って上下左右スワイプ対応のモバイルフレンドリーなスライダーを表示する方法をご紹介します。
スライダーが上下左右スワイプ、スクロール、クリックすると左右にスライドします。

Contents

itemslide.jsを使って上下左右スワイプ対応のモバイルフレンドリーなスライダーを表示するCSS記述
itemslide.jsを使って上下左右スワイプ対応のモバイルフレンドリーなスライダーを表示するHTML記述
itemslide.jsを使って上下左右スワイプ対応のモバイルフレンドリーなスライダーを表示するJavaScriptの記述
itemslide.jsを使って上下左右スワイプ対応のモバイルフレンドリーなスライダーを表示するデモページ
ソース元：ItemSlide.js – JavaScript touch carousel

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>