プログラミング

【PAS-POL模写】画像をスライドさせるオプションの解説

⏰この記事を読むのにかかる時間⏰: 約39

 

どうもトモヤです。

初学者は必ずと言っていいほど経験するであろうPASーPOLと言うサイトの模写について簡単に解説していきます。

このPASーPOLと言うサイトの1番の勉強ポイントはjQueryを用いた画像のスライドだと思っています。

今回の記事では画像をスライドさせる部分に特化して解説していきます

 

まずはjQueryのプラグインである”flexslider”を使っていくので、準備をする必要があります。

下記のサイトに飛んでいただき、ダウンロードしてくださいね。

http://flexslider.woothemes.com/

 

ダウンロードしていただいた、flex-sliderのファイルから下記の2つのファイルをコピーして、ご自身が作成中のフォルダ内にコピーしてペーストしてください。

 

 

以下のようなファイル構成になります。

flexslider.cssとjquery.flexslider.jsに関してはコピペしたもので、jquery.jsとscript.jsについては各自でご用意くださいね。

 

jquery.jsについてはjQueryを使うために必要でscript.jsについてはコードを書くために用意したファイルなので、名前は任意で構いません。

 

ここまでできたら、PAS-POLで用いたflexsliderのオプションについて解説していきます。

まず答えから先に、、

 

$(window).load(function () {
$(‘.flexslider’).flexslider({
controlNav: false,
directionNav: false,
slideshow: true,
slideSpeedspeed: 100,
animation: “fade”,
animationSpeed: 3000,
animationLoop: true
});

これらのオプションを用いてPAS-POLの画像のスライドを実現しています。

 

順番に解説していきます。

 

controlNav: false,

スライダーの下に表示されるナビゲーションの有無を選択できます。

今回はfalseとすることで非表示にしていますね。

 

directionNav: false,

両サイドに表示される三角形のような画像のナビゲーションの非表示にしています。

わかるとは思いますが、デフォルト(何も選択してない状態)はtrueなので表示されます。

slideshow: true,

自動でスライドが進むかについての記述です。

今回のPAS-POLさんは自動で進むのでtrueですね。

 

slideSpeedspeed: 100,

これはスライドのスピードの指定です。

デフォルトでは7000となっております。7000の方が遅くて、100の方が早いです。

つまり、数字が大きいほど遅くスライドが進み、小さいほど早く進みます。

 

animation: “fade”,

animationはfadeかslideを選択できます。今回の模写ではfadeとします。

animationSpeed: 3000,

数値が高いほどアニメーションのスピードが速くなります。

デフォルトは600となっております、ここは個人のお好みで。

 

animationLoop: true

アニメーション(スライド)を繰り返すかどうかの指定です。

今回はtrueです。

 

ここまで記述できたのであれば、スライドショーは実装できたはずです。

もし動かない場合は jQueryがうまく読み込めていないなど、準備段階での不備がある可能性があるので、気軽に状況をコメントいただけたら対応させていただきます。

PASーPOLさんの模写コーディングについては、今回紹介したスライドの実装以外にもハンバーガーメニューの実装など、jQueryを用いている記述があるのでその辺もまた記事にまとめていきたいと思います。

 

不明点等があればぜひ気軽にコメントをください。今回の記事が少しでも役に立ったと思っていただけたらTwitterやSNSなどでシェアしていただけるととてもうれしいです。

ABOUT ME
ともや
人口2万人の北海道の町出身( ͡° ͜ʖ ͡°) WEBライター/プログラミング/フリーランスWebライターです。 新卒公務員→体調崩し退職→転職のため上京→緊急事態宣言→貯金0円→ブログ収益6桁とWEBライターで生活してます💻 都内のシェアハウスでブログ書いてます。 取材やWEBライターのお仕事の依頼はお問い合わせフォームからお願いします🙇‍♂️

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です