development_creative

この記事は1年以上経過しています。

もうスライダーのライブラリはもうこれでいいでしょう。Splide.js

slick.jsってさ・・・・

よく、slick.jsがスライダーjsとして有名ですが、jqueryが必要で、
しかも対応しているバージョンが古いっていうジレンマがあって、実装を躊躇う・・・。
なので、毎回自前でデザインに合うスライダーを作っていたんですが、
便利なものは使い倒して、バシバシ作って金欲しい!と思い始めて、探し当てました!

そう。Splide.jsです。

こちらに大体の概要をまとめてくださっている記事があったので、読んでみては?
https://b-risk.jp/blog/2022/07/splide/

こちらが公式サイトっす。
https://ja.splidejs.com/

民度低く実装する理由をお伝えします

最近、文章が美しいとか、丁寧とか、無駄なものに思えてきているので、
すげ〜頭の悪い言葉で、竹を割ったように説明したい!

実装に至わけは・・・

  • とにかく軽いらしい
  • jqueryとかいらない
  • 公式サイトが日本語対応
  • あと、なんかかっこいいのでリテラシーのファビュラスな人たちが作ってる
  • となると、このjsはイケてるはず

とまぁ、こんな感じです。
特に推したい理由としては、boldかけてますが、後半の2つですね。

スーパーばっくりした使い方(CDN)

1.headタグ内にcdnでsplideのcssを読み込む

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">

2.基本の型をブチこむ

<div class="splide">
	<div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">Slide 01</li>
			<li class="splide__slide">Slide 02</li>
			<li class="splide__slide">Slide 03</li>
		</ul>
	</div>
</div>

3.scriptを読み込む

body前とかに貼り付けね?頼みますよ?

<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>

4.body前とかで、jsのオプションやらを記述する。

‘.splide’部分は、好きなクラス名でOK。
当然、変更したら、html側のclass=’splide’の編集も忘れんなよ!!
トンチンカンなのやめろよ?

<script>
new Splide( '.splide', {
	type : 'loop',
	perPage: 3,
}).mount();
</script>

5.まとめるとこんな感じ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">
</head>
<body>
<div class="splide">
	<div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">Slide 01</li>
			<li class="splide__slide">Slide 02</li>
			<li class="splide__slide">Slide 03</li>
		</ul>
	</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>
<script> /* ここからスライダーのオプションとか */
new Splide( '.splide', { 
	type : 'loop', /* ループ再生するよ */
	perPage: 3, /* スライドの枚数は3枚だよ */
}).mount();
</script>
</body>
</html>

ちなみに、オプションとか指定するコードは、
1スライダーにつき、1セット必要。
class名を2つとか書いても動作しないんで、よろしくっす。

あとがき:ファビュラスな集団が作るものはファビュラス

これ、基本原則ですよね。
やっぱりどうしようもない感じの人々って、どうしようもないものしか作らないんですよね。
(自分にも言ってる)

なんで、どうしようもないかって言いますと、
どうしようもない判断軸や基準のもと生きてるからですね。

どうしようもない感じにその人が見えてしまうのは、
どうしようもないことを人生で積み重ねてきた為に、
結果として、どうしようもなさがアウトプットされてしまっているというわけですね。
はい。負け越してる感じ満載って感じです。

なので、ちょっとサイトがかっけ〜とか、書いている文章がわかりやすいっていう、
端々に滲み出るファビュラスさを筆者は感じてSplideしちゃったわけですね。

ほんと開発集団の皆さま偉すぎ。
使い倒すね!!!

Related ariticle

関連記事

TOP