jQueryスライダープラグイン「ItemSlide.js」

スライダーに種類は様々ありますよね。自動的に画像が移り変わったり、左右に表示された三角のボタンを押すと隣の隠れた画像を表示するなど。

私が「こんなサイト作りたい！」と思ったのは下記サイトになります。中でも気になったのは商品一覧の表示方法がかっこいい・・・！と思いました。

「FIL - SUMI LIMITED」https://sumi.fillinglife.co

画像そのものをつまみ、スライドさせる。このような方法でどうにか自分の制作するWEBサイトに使えないか検討しました。スライダープラグインをまとめた記事がありました。

「jQueryスライダープラグイン9選！スライドショーを手軽に作成｜ferret」https://ferret-plus.com/9396

ここで、似たものを見つけたのです。実際に使用したのがこちら。

「ItemSlide.js」https://itemslide.org

スワイプアウトして消える、というデフォルトの機能は不要だったので削除して使用しました。「ItemSlide.js」のサイトからファイルをダウンロードするのですが、オプション機能が様々あり自分でカスタマイズすることができるので、不要なファイルは消してしまいましょう。実際に私が使用したのは以下。

【HTML】

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="js/itemslide.min.js"></script>
	<script src="js/sliding.js"></script>

・jqueryの読み込みは忘れず。

・コピペして持ってきたitemslideのファイル

・jQueryを書くファイルを用意。ここに書いたものは以下。

【jQuery】

var carousel;
$(document).ready(function () {
   carousel = $("スライダー対象のクラス名");
   carousel.itemslide({
       left_sided: true
   }); //initialize itemslide
   $(window).resize(function () {
       carousel.reload();
   }); //Recalculate width and center positions and sizes when window is resized
});

そしてこの後、このスライダーが コンテンツ幅をぶち抜きoverflow-x:hiddenが効かないなど色々と面倒ごとを起こしたので、もし同じような方がいれば「overflow-x:hiddenの邪魔をするposition:absolute」を見て頂けたらと思います。