フロントの人の雑多メモ

有名どころのスライダープラグインのおすすめとサンプル比較

有名どころのスライダープラグインのおすすめとサンプル比較

jQueryスライダープラグインの有名どころのサンプルをひたすら並べていきます｡

その中でおすすめも紹介していきます！

目次

slick

まずは個人的に一番おすすめのスライダープラグイン「slick」です｡

ページ送りしたときの挙動もレスポンスがよく､オプションも豊富で柔軟です｡

サイズはJSが41.8KB､CSS2つ4.8KBの 計46.6KB

必要ファイルの読み込みやスライダー部分など､最低限の実装はこんな感じ｡

<!-- CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">

<!-- スライダー -->
<div class="slick">
	<div class="slide"><img src="img01.jpg"></div>
	<div class="slide"><img src="img02.jpg"></div>
	<div class="slide"><img src="img03.jpg"></div>
	<div class="slide"><img src="img04.jpg"></div>
</div>

<!-- JS -->
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
$(function(){
	//slick
	$(".slick").slick();
});
</script>

オプション

slickのオプションはこのように指定します｡

$(".slick").slick({
	autoplay: true, //自動スタート デフォルトはfalse
	dots: true, //ドット デフォルトはfalse
	arrows: true, //前・次の矢印をオフに デフォルトはtrue
	autoplaySpeed: 4000, //自動再生のスピード デフォルトは3000
	speed: 400, //アニメーションの速度 デフォルトは300
	centerMode: true, //左右のスライドをちら見せ デフォルトはfalse
	variableWidth: true, //様々な幅の画像に対応 デフォルトはfalse
	pauseOnHover: false, //スライダーをホバーしてる間は停止 デフォルトはtrue
	responsive: [{ //レスポンシブ
		breakpoint: 768, //ブレイクポイント
		settings: { //スマホでの設定
			centerMode: false,
			variableWidth: false
		}
	}]
});

上記オプションを指定したスライダーがこちら｡

左右のスライドをチラ見せしたり､レスポンシブや､様々な幅の画像 (variableWidth) にも対応しています｡

その他

  • フェード
  • 縦向きスライド
  • サムネイル付きスライダー

などにも対応しています｡

slick.jsの公式ドキュメントはこちら

PR

bxSlider

続いて､老舗感のあるbxSlider (昔からあるイメージ)

人気のプラグインですが､ページ送りした後にタイミングがおかしくなったり､自動で再開しなかったり､若干難のあるイメージがあります｡

サイズはJSが22.9KB､CSS 3.8KB､画像2枚11.1KBの 計37.9KB です｡

最低限の実装はこんな感じ｡

<!-- CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">

<!-- スライダー -->
<div class="bxslider">
	<div class="slide"><img src="img01.jpg"></div>
	<div class="slide"><img src="img02.jpg"></div>
	<div class="slide"><img src="img03.jpg"></div>
	<div class="slide"><img src="img04.jpg"></div>
</div>

<!-- JS -->
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script>
$(function(){
	//bxslider
	$(".bxslider").bxSlider();
});
</script>

オプション

bxSliderのオプションはこのように指定します｡

$(".bxslider").bxSlider({
	auto: true, //自動スタート デフォルトはfalse
	pager: false, //ドット デフォルトはtrue
	controls: true, //前・次の矢印 デフォルトはtrue
	pause: 3000, //自動再生のスピード デフォルトは4000
	speed: 400, //アニメーションの速度 デフォルトは500
});

上記オプションを指定したスライダーがこちら

bxSliderの公式ドキュメントはこちら

レスポンシブには対応していないので､オプションでできない部分はCSSなどで強引にやる必要があります｡

左右のスライドチラ見せ

bxSliderで左右のスライドをチラ見せは､標準仕様ではできないのでCSSで強引にやる必要があります｡

スライダーをさらにdivで囲って

<div class="bxslider_wrap">
	<div class="bxslider">
		<div class="slide"><img src="img01.jpg"></div>
		<div class="slide"><img src="img02.jpg"></div>
		<div class="slide"><img src="img03.jpg"></div>
		<div class="slide"><img src="img04.jpg"></div>
	</div>
</div>

このようなCSSを書けばできます｡

.bxslider_wrap {
	overflow: hidden;
}
.bxslider_wrap .bx-wrapper {
	max-width: 640px!important;
	margin-left: auto;
	margin-right: auto;
	background: none;
	border: none;
	box-shadow: none;
}
.bxslider_wrap .bx-viewport {
	overflow: visible!important;
}

その他

  • フェード
  • 縦向きスライド
  • サムネイル付きスライダー

などにも対応しています｡

しかし､bxSliderは様々な幅の画像 (variableWidth) にも対応しておらず

また､アクティブなスライドを取得するのにひと工夫必要です｡

(アクティブじゃないスライドを半透明にしたりしたいじゃないですか？)

そのやり方についてはこちらの記事で紹介していますので､よければご覧ください｡

【bxSlider】アクティブなスライドを取得する方法

【bxSlider】アクティブなスライドを取得する方法

PR

Swiper

これ以降､私も使ったことのないプラグインです｡

続いて､jQuery不要なスライダープラグイン「Swiper」

サイズはJSが137KB､CSSが18KBの 計155KB

とりあえず実装してみました｡ (左右にスワイプできます)

最低限の実装はこんな感じ｡

<!-- CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css">

<!-- スライダー -->
<div class="swiper">
	<div class="swiper-wrapper">
		<div class="swiper-slide"><img src="img01.jpg"></div>
		<div class="swiper-slide"><img src="img02.jpg"></div>
		<div class="swiper-slide"><img src="img03.jpg"></div>
		<div class="swiper-slide"><img src="img04.jpg"></div>
	</div>
</div>

<!-- JS -->
<script src="//cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper(".swiper", {});
</script>

オプションとページャー､ドット

色々追加すると､スライダーらしくなりました｡
左右のスライドチラ見せも標準仕様でできます｡

HTML

ページャーとドットはHTMLに書きます｡

<div class="swiper">
	<div class="swiper-wrapper">
		<div class="swiper-slide"><img src="img01.jpg"></div>
		<div class="swiper-slide"><img src="img02.jpg"></div>
		<div class="swiper-slide"><img src="img03.jpg"></div>
		<div class="swiper-slide"><img src="img04.jpg"></div>
	</div>
	<!-- ドット -->
	<div class="swiper-pagination"></div>
	<!-- ページャー -->
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
</div>

CSS

必要最低限のCSSを書いて

.swiper {
	position: relative;
	overflow: hidden;
}

JS

Swiperを実行します｡ オプションはこのように指定します｡

const swiper = new Swiper(".swiper", {
	loop: true, //最後までいったら最初から デフォルトはfalse
	speed: 400, //アニメーションの速度 デフォルトは300
	autoplay: { // 自動再生
		delay: 3000, //自動再生のスピード
		disableOnInteraction: false, //矢印をクリックしても自動再生を止めないようにする
	},
	//ドットを指定
	pagination: {
		el: ".swiper-pagination",
		clickable: true //ドットのクリックを有効化
	},
	//ページャーを指定
	navigation: {
		nextEl: ".swiper-button-next",
		prevEl: ".swiper-button-prev"
	},
	//レスポンシブ
	breakpoints: {
		768: { //768px以上なら次を適用
			slidesPerView: 1.5, //左右のスライドチラ見せ
			centeredSlides: true, //左右のスライドチラ見せ
		}
	}
});

その他

  • フェード (フェード以外にもcubeなどのエフェクトがあります)
  • 縦向きスライド
  • サムネイル付きスライダー

などにも対応しています｡

また､様々な幅の画像 (variableWidth) もできました｡

詳しくはこちらの記事で解説しています｡

【Swiper】様々な幅のスライド (variableWidth) に対応する方法

【Swiper】様々な幅のスライド (variableWidth) に対応する方法

Swiper公式ドキュメントはこちら

少し触ってみた感じ､レスポンスが良くて軽い感じがしますね！

アクティブなスライドに「.swiper-slide-active」クラスも付与されます｡

ただ､サイズが155KBと他のプラグインと比べ少し大きいので､jQueryを使えないなど､特別な理由が無い限りは選ばないかな...とも思います｡

PR

FlexSlider 2

続いてご紹介するのは「FlexSlider 2」

JSが22.3KB CSSが4.33KBの 計26.7KB

個人的には使ったことなかったのですが､大手企業サイトでも使われてるらしい｡有名なプラグインらしい｡です笑

「FlexSlider 2はjQuery3.xで動かない」なんて記事も見かけたのですが､それは
flexsliderを実行する際の
$(window).load(function(){ を $(window).on("load", function(){ に変えればいいだけらしいです｡
そもそも $(function(){ を使っていれば関係ないです｡

現に当ブログのjQueryバージョンは3.4.1ですが､無事動いてます｡

ただ､標準でページャーが見切れちゃってますね...
CSSの「line-height」が当たると見切れちゃうようです｡

flexslider2ページャー見切れてる

最低限の実装はこんな感じ｡
.flexslider の中に .slides というタグを作り､その中に画像を並べます｡

<!-- CSS -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.2/flexslider.min.css">

<!-- スライダー -->
<div class="flexslider">
	<ul class="slides">
		<li><img src="img01.jpg"></li>
		<li><img src="img02.jpg"></li>
		<li><img src="img03.jpg"></li>
		<li><img src="img04.jpg"></li>
	</ul>
</div>

<!-- JS -->
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.2/jquery.flexslider.min.js"></script>
<script>
$(function(){
	//flexslider2
	$('.flexslider').flexslider({
		animation: "slide" //スライダーの種類 デフォルトはfade
	});
});
</script>

オプション

オプションは以下のように記述します｡

$(".flexslider").flexslider({
	animation: "slide", //スライダーの種類 デフォルトはfade
	slideshow: true, //自動スタート デフォルトはtrue
	controlNav: true, //ドット デフォルトはtrue
	directionNav: true, //前・次の矢印 デフォルトはtrue
	slideshowSpeed: 4000, //自動再生のスピード デフォルトは7000
	animationSpeed: 400 //アニメーションの速度 デフォルトは600
});

公式ドキュメントの情報が少なく､オプションについてはオンズさんの記事を参考にさせていただきました｡

【jQuery】超万能スライダー FlexSlider の使い方をマスターする。 | 株式会社オンズ

左右のスライドチラ見せ

FlexSlider 2の標準仕様でできないので､CSSで強引にやる必要があります｡

スライダーをさらにdivタグで囲い

<div class="flexslider_wrap">
	<div class="flexslider">
		<ul class="slides">
			<li><img src="img01.jpg"></li>
			<li><img src="img02.jpg"></li>
			<li><img src="img03.jpg"></li>
			<li><img src="img04.jpg"></li>
		</ul>
	</div>
</div>

このようなCSSを書けばできます｡
ついでに､ページャーが見切れてるのも直してます｡

.flexslider_wrap {
	overflow: hidden;
}
.flexslider {
	max-width: 640px; /*画像の幅に応じて変更*/
	margin-left: auto;
	margin-right: auto;
}
.flexslider .flex-viewport {
	overflow: visible!important;
}

.flexslider_wrap .flex-direction-nav {
	line-height: 1; /* ページャーが見切れてるのを直す */
}

その他

  • フェード
  • 縦向きスライド
  • サムネイル付きスライダー

などにも対応しています｡

FlexSlider 2は様々な幅の画像 (variableWidth) には対応していません｡

プラグインのサイズが 26.7KB とかなり軽量で､アクティブなスライドに「.flex-active-slide」クラスも付与されます

しかし､ページャーを押した後に再開しなかったり､最初からページャーが見切れてて手直しが必要だったりと､かゆいところに手が届かない感じですね...

PR

以上､有名どころのスライダープラグインのサンプルまとめでした｡

リクエストなどあればコメントください！

コメント

「できました！」などの報告もお待ちしております｡

内容を確認の上､個人情報などは省いて掲載させていただきます｡

お名前・メールアドレスも入力する

メールで返信がほしい場合に入力してください｡

頂いた個人情報は開示しません｡返信のためだけに利用いたします｡

直接送信されます｡確認の上､「送信」してください｡

お役に立てましたら応援をお待ちしております！
頂いた応援は子育てに活用させていただきます｡

OFUSEで応援を送る


または以下のボタンからなにか買って応援 (PR)

Amazon

楽天市場

Yahoo!ショッピング

Amazonのアソシエイトとして「けん」は適格販売により収入を得ています。

  1. HOME
  2. 「JS」記事一覧

シェア

Twitterでシェア Facebookでシェア LINEでシェア はてなブックマークでシェア

お役に立てましたら応援をお待ちしております！
頂いた応援は子育てに活用させていただきます｡

OFUSEで応援を送る