【jQuery】シンプルなカルーセルを実装、Boishakh carouselの使い方

シュウ

今回は【jQuery】シンプルなカルーセルを実装、Boishakh carouselの使い方!!
の解説になります！

こんな方に読んでほしい

jQueryを学び始めた方へ
プラグインのboishakh-carousel.jsを使ってシンプルなカルーセルを作成したい方向け
今回はboishakh-carousel.jsについて解説しております。

今回は、シンプルなカルーセルを実装についての解説になります。
「boishakh-carousel.js」になりますが、今でも簡単で使いやすいプラグインになっております。

イメージ図は上記のようになります。
画像(thumbnail)が横にスライドするイメージになります。とてもシンプルな構造になっております。

[記事の内容]

Boishakh carouselについて

boishakh-carousel.jsとは、カルーセル(画像スライド)のことを示します。
jQueryが苦手な方でも問題ありません。
まずは下記のサイトから「boishakh-carousel.js」をダウンロードしましょう。

●Boishakh carouselにアクセス: 1https://github.com/pranaykantey/boishakh-carousel

●「Code」ボタンをクリック: 2

●「Download ZIP」ボタンをクリック: 3

必要なファイルについて

ダウンロード後に必要なファイルについて解説していきます。
まずは、ファイル名の「boishakh-carousel-master」をご確認ください。

●jsファイル: 1「js」 > 「boishakh-carousel.js」の1点を使用します。

<!--js-->
<script src="js/boishakh-carousel.js" type="text/javascript"></script>

また、「boishakh-carousel.js」を使用する際には、boishakh-carouselを使用する宣言をしなければなりません。
以下のコードを合わせて指定しましょう。

<!--js-->
<script src="js/boishakh-carousel.js" type="text/javascript"></script>
<script>
(function($){
    $(document).ready(function(){
        $('.boishakh-carousel').boishakhCarousel();
    });
}(jQuery));
</script>

「boishakh-carousel.js」と繋げて記述するのが良いでしょう。
また、ファイルの階層は、ご自身のフォルダに合わせてください。

次に、jquery本体のプラグイン設置します。
今回は2つ目のパターンを採用して解説します。

● 1つ目は、ファイルをダウンロードして使用するパターン、
● 2つ目は、ファイルをダウンロードせずに、「URL」から読み込むパターンになります。
どちらでも問題ありません。

<!--js-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/boishakh-carousel.js" type="text/javascript"></script>
<script>
(function($){
    $(document).ready(function(){
        $('.boishakh-carousel').boishakhCarousel();
    });
}(jQuery));
</script>

必ず、jquery本体のプラグイン上、boishakh-carouselを下に設置しましょう。
jqueryをダウンロードしたい方は、こちらのリンクから。

記述場所について

基本的にはbody内に指定するようにしましょう。
基本構造の書き方は以下のようになります。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> 【jQuery】シンプルなカルーセルを実装...</title>
</head>
<body>

　コンテンツが入ります。

<!--js-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/boishakh-carousel.js" type="text/javascript"></script>
<script>
(function($){
    $(document).ready(function(){
        $('.boishakh-carousel').boishakhCarousel();
    });
}(jQuery));
</script>
</body>
</html>

カルーセルの設定について

次に、カルーセルの設定について解説します。

カルーセルの設定について

デモサイトはコチラから。
基本構造の書き方は以下のようになります。

カルーセルの設定について

<div class="boishakh-carousel">
 	<div class="bc-content">
		<div class="bc-item"><img src="sample01.jpg" alt=""></div>
		<div class="bc-item"><img src="sample02.jpg" alt=""></div>
		<div class="bc-item"><img src="sample03.jpg" alt=""></div>
		<div class="bc-item"><img src="sample04.jpg" alt=""></div>
		<div class="bc-item"><img src="sample05.jpg" alt=""></div>
		<div class="bc-item"><img src="sample06.jpg" alt=""></div>
	</div><!--bc-content-->
</div><!--boishakh-carousel-->

/*--必須のCSSになります(デフォルト)。　変更可--*/

/*--親要素--*/
.boishakh-carousel{position: relative;}
.bc-item{
	background: blue;
	float: left;
	overflow: hidden;
}

.bc-container {
	width: 960px;
	overflow: hidden;
	margin: auto;
}	

.bc-content{
	width: 4000px;
	transition: .6s;
}

/*--矢印--*/
.prev {
	position: absolute;
	top: 40%;
	left: 0;
	background: rgba(0,0,0,.5);
	color: white;
	padding: 14px 18px;
	cursor: pointer;
}

.next {
	position: absolute;
	top: 40%;
	right: 0;
	background: rgba(0,0,0,.5);
	color: white;
	padding: 14px 18px;
	cursor: pointer;
}

img {
	width: 100%;
	height: auto;
}

(function($){
    $(document).ready(function(){
        $('.boishakh-carousel').boishakhCarousel();
    });	
}(jQuery));

親要素は、.boishakh-carouselを指定しています。
ここは、$(".boishakh-carousel").boishakhCarouselと同じクラス名にするようにしましょう。

CSSには関しては上記がデフォルトになりますが、矢印などの装飾は変更可能です。

余白、背景色について

オプションの書き方は以下のようになります。

余白、背景色の設定について

(function($){
    $(document).ready(function(){
        $('.boishakh-carousel').boishakhCarousel({
			margin: 20,
			background: '#333333',
		});
    });
}(jQuery));

余白を空けるには、marginを指定します。
背景色は、backgroundで指定します。

スライドの枚数について

オプションの書き方は以下のようになります。

スライドの枚数の設定について

(function($){
    $(document).ready(function(){
        $('.boishakh-carousel').boishakhCarousel({
			items: 3,
			margin: 20,
			background: '#333333',
		});
    });
}(jQuery));

枚数を増やすには、itemsを指定します。

矢印の変更について

オプションの書き方は以下のようになります。

矢印の変更について

(function($){
    $(document).ready(function(){
        $('.boishakh-carousel').boishakhCarousel({
			items: 3,
			prev: '〇〇',
			next: '〇〇'
		});
    });
}(jQuery));

矢印を指定するには、prev、nextを追加し、文字などを指定します。
こちらのサイトで他にもオプションについて解説しております。