SHU BLOG

BLOG NEWS ブログ

TITLE

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

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

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

こんな方に読んでほしい

  • jQueryを学び始めた方へ
  • プラグインのPrrple Sliderを使って「画像スライド」をしたい方向け
  • 今回は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 = スライドを自動再生」など
こちらのサイトで他のオプションについても解説しております。

まとめ

今回はこれで以上です。

POINT
  • Prrple Sliderとは、「画像スライド」のことを示します。
  • 必要なファイルはprrple.slider.cssと、prrple.slider.jsと、scripts.jsの3点になります。
  • scripts.jsは、一部抜粋して使用しても問題ありません。
  • こちらにデモサイトを用意しました。
  • Prrple Slider公式サイトはこちらから
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

HP

お助けコネクト

神奈川県を中心に不用品回収・粗大ゴミ回収・遺品整理・ゴミ屋敷片付け・家具の移動 など
なんでもやります!!お気軽にご相談ください。詳細はコチラから

page_top