WordPress jqueryで多くの画像を違うタイミングで変えていくスライダーを実装

Article views61 VIEW

b1f84567 s - Wordpress jqueryで多くの画像を違うタイミングで変えていくスライダーを実装ヘッダーでスライダーを使いたい。

そんな要望は沢山ある。

今更flashなんて使わない。多くの人がjqueryを使う事だろう。

しかし今回は1枚の画像ではなく、6枚の画像を並べそれぞれ違うタイミングでスライドして行く様設定していく必要があった。

いまいちピンと来ないと思うので今回はスライドのサンプルを用意しました。
(サンプルなので配置等は手抜き。ご容赦を)   

サンプル


a8e33a74 - Wordpress jqueryで多くの画像を違うタイミングで変えていくスライダーを実装
9b60f372 - Wordpress jqueryで多くの画像を違うタイミングで変えていくスライダーを実装
6035245e - Wordpress jqueryで多くの画像を違うタイミングで変えていくスライダーを実装
f68aa14f - Wordpress jqueryで多くの画像を違うタイミングで変えていくスライダーを実装


3424359c - Wordpress jqueryで多くの画像を違うタイミングで変えていくスライダーを実装
3ca18ae4 - Wordpress jqueryで多くの画像を違うタイミングで変えていくスライダーを実装
1e20d4ba - Wordpress jqueryで多くの画像を違うタイミングで変えていくスライダーを実装
11574e82 - Wordpress jqueryで多くの画像を違うタイミングで変えていくスライダーを実装


dabe90f8 - Wordpress jqueryで多くの画像を違うタイミングで変えていくスライダーを実装
061b2d94 - Wordpress jqueryで多くの画像を違うタイミングで変えていくスライダーを実装
824701e0 - Wordpress jqueryで多くの画像を違うタイミングで変えていくスライダーを実装
05645ab4 - Wordpress jqueryで多くの画像を違うタイミングで変えていくスライダーを実装


f81d67ff - Wordpress jqueryで多くの画像を違うタイミングで変えていくスライダーを実装
0f7652c9 - Wordpress jqueryで多くの画像を違うタイミングで変えていくスライダーを実装
6f777a77 - Wordpress jqueryで多くの画像を違うタイミングで変えていくスライダーを実装
46f193a1 - Wordpress jqueryで多くの画像を違うタイミングで変えていくスライダーを実装


8c38c7cb - Wordpress jqueryで多くの画像を違うタイミングで変えていくスライダーを実装
0cbcc7e9 - Wordpress jqueryで多くの画像を違うタイミングで変えていくスライダーを実装
b445bace - Wordpress jqueryで多くの画像を違うタイミングで変えていくスライダーを実装
7d4c8b0a - Wordpress jqueryで多くの画像を違うタイミングで変えていくスライダーを実装


5f35d9ae - Wordpress jqueryで多くの画像を違うタイミングで変えていくスライダーを実装
353ee619 - Wordpress jqueryで多くの画像を違うタイミングで変えていくスライダーを実装
1de2500e - Wordpress jqueryで多くの画像を違うタイミングで変えていくスライダーを実装
e23b72d2 - Wordpress jqueryで多くの画像を違うタイミングで変えていくスライダーを実装

一緒に仕事している方のペットと僕の家の近所にいる猫の写真です。かわいいでしょ?

これの実装方法は続きを!

jquery.cycle.lite.jsをサーバーにアップ

jquery.cycle.liteオフィシャルホームページ

内容は

lead.jsを作成・サーバーにアップ

内容は

a44d17fb s - Wordpress jqueryで多くの画像を違うタイミングで変えていくスライダーを実装

まずこのlead.jsで表示したい数のleadを増やします。
※増やす場合はlead_2 lead_3と名前を変えて下さい。

ここではlead_1の挙動を書き記しています。
後ろの方に書いてある5000という数字はスライドするタイミングです。
遅かったり早かったりしたらここの数字を変えて下さい。

headに記述

a2a21843 s - Wordpress jqueryで多くの画像を違うタイミングで変えていくスライダーを実装

</head>の直前に記載しました。

CSSの用意

CSSでは配置を決めていきます。
本記事のスライダーのCSSにはこう記述しました

表示したい場所への記入 

こうやってやります。

実装完了!

これで表示出来ます。

写真はホームページの訴求力を上げる1つの方法だと思います。
例えばECサイトのトップページにこういったスライダーで商品を沢山羅列しアピールするのも手かもしれません。
しかし配置や写真選びのセンス等が問われるので中々難しいですね。

Pocket
pinit fg en rect gray 28 - Wordpress jqueryで多くの画像を違うタイミングで変えていくスライダーを実装
line88x20 - Wordpress jqueryで多くの画像を違うタイミングで変えていくスライダーを実装
[`evernote` not found]

Leave a Comment

CAPTCHA