【jQuery】シンプルなスライドを実装、Prrple Sliderの使い方!!

シュウ

今回は【jQuery】シンプルなスライドを実装、Prrple Sliderの使い方!!
の解説になります！

こんな方に読んでほしい

jQueryを学び始めた方へ
プラグインのPrrple Sliderを使って「画像スライド」をしたい方向け
今回はPrrple Sliderについて解説しております。

今回は、「画像スライド」についての解説になります。
「Prrple Slider」になりますが、今でも簡単で使いやすいプラグインになっております。

イメージ図は上記のようになります。
「Prrple Slider」プラグインは、スライドのタイプが豊富にあり、スライド（横）、スライド（縦）、ループ、
フェードなどが簡単に設置できます。

[記事の内容]

Prrple Sliderについて

Prrple Sliderとは、「画像スライド」のことを示します。
スライドのタイプは10種類以上あります、今回はスライド（横）、スライド（縦）ループをご紹介。
jQueryが苦手な方でも問題ありません。
まずは下記のサイトから「Prrple Slider」をダウンロードしましょう。

●Prrple Sliderにアクセス: 1https://github.com/Prrple/Prrple-Slider

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

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

必要なファイルについて

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

●cssファイル: 1「src」 > 「prrple.slider.css」

●jsファイル: 2「src」 > 「prrple.slider.js」

●jsファイル: 3「examples」 > 「js」 > 「scripts.js」の3点を使用します。

<!--css-->
<link rel="stylesheet" href="css/prrple.slider.css">
<!--js-->
<script src="js/prrple.slider.js" type="text/javascript"></script>
<script src="js/scripts.js" type="text/javascript"></script>

注意ポイント！
また、「prrple.slider.js」を使用する際には、prrple.sliderpを使用する宣言する必要がありますが、今回は「scripts.js」にコードが記述してあります。
※使用したいタイプのみ記述しても問題ありません、約10種類以上のタイプが記述してあります。

<!--css-->
<link rel="stylesheet" href="css/prrple.slider.css">
<!--js-->
<script src="js/prrple.slider.js" type="text/javascript"></script>

<!--シンプルなスライドの場合 「scripts.js」から抜粋-->
<script type="text/javascript">
$(document).ready(function(){
	$('#slider0 .slider').prrpleSlider();
});	
</script>

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

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

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

<!--js-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/prrple.slider.js" type="text/javascript"></script>

<!--シンプルなスライドの場合 「scripts.js」から抜粋-->
<script type="text/javascript">
 $(document).ready(function(){
	$('#slider0 .slider').prrpleSlider();
});	
</script>

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

記述場所について

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

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>【jQuery】シンプルなスライドを実装...</title>
<!--css-->
<link rel="stylesheet" href="css/prrple.slider.css">
</head>
<body>

　コンテンツが入ります。

<!--js-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/prrple.slider.js" type="text/javascript"></script>

<!--シンプルなスライドの場合 「scripts.js」から抜粋-->
<script type="text/javascript">
$(document).ready(function(){
	$('#slider0 .slider').prrpleSlider();
});	
</script>
</body>
</html>

「画像スライド」の設定について

次に、シンプルなスライドの設定について解説します。

シンプルなスライドの設定について

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

シンプルなスライドの設定

<div class="container" id="slider0">
	<div class="slider">
        <div class="slider_area">
          <div class="slides">
			<!--↓ スライドブロック-->  
            <div class="slide">
              <div class="slidetitle"><img src="sample01.jpg" /></div>
            </div>
			<!--↑ スライドブロック 2枚目以降は省略-->
          </div>
        </div>
		<!--↓ 矢印-->
        <a class="slider_left">&#12296;</a>
        <a class="slider_right">&#12297;</a>
	</div>
</div><!--slider0 END-->

/*--CSSは自由に変更可--*/
/*--今回は「prrple.slider.css」から変更した箇所を一部抜粋--*/
.slider{
  display:block;
  position:relative;
  width:100%;
  height:460px; /*--画像の高さ--*/
}

/*--65行目--*/
.slider .slider_left,
.slider .slider_right{
  font-size: 30px; /*--矢印の大きさ--*/
}

/*--122行目--*/
.slider .slider_dot.current{
  background:#fff; /*--ボタン色--*/
}

$(document).ready(function(){
	$('#slider0 .slider').prrpleSlider();
});

今回は、全体をcontainerで囲み、id="slider0"に指定しています。
「id=”〇〇”」でスライドのタイプを振り分けています。
他のタイプは「scripts.js」に記述しております。

各スライドのブロックはslide〜/slideになります、2枚目以降は複製してください。
・矢印に関しては、今回は特殊文字を使用しておりますが、画像でも問題ありません。
また、CSSは「prrple.slider.css」から変更した箇所を一部抜粋しております。

上下(ループ)なスライドの設定について

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

上下(ループ)なスライドの設定

<div class="container" id="sliderv2">
「id="sliderv2"」名のみ変更
以下書略
</div><!--sliderv2 END-->

/*--上記と同じ設定--*/

$(document).ready(function(){
	$('#sliderv2 .slider').prrpleSlider({
	  direction:				'vertical',
	  loopSeamless:			false,
	  csstransforms:			false,
	  autoPlay: true,
	  richSwiping:			false
	});
});

今回は、全体をcontainerで囲み、id="sliderv2"に指定しています。
「id=”〇〇”」でスライドのタイプを振り分けています。
他のタイプは「scripts.js」に記述しております。

JavaScriptのオプションで、direction:'vertical'で縦スライドに変更しております。
「loopSeamless = スライドをループ」、「autoPlay: true = スライドを自動再生」など
こちらのサイトで他のオプションについても解説しております。