flexslider-eye

flexsliderはイメージ以外もスライドできるよ! その2

2013.02.22(金) jQuery, WordPress
このエントリーをはてなブックマークに追加

前々回の記事で、次回お楽しみにと書いたものの、あれ以上書くことがあるか?と思い、まあ期待している人もいるとは思えないので、ほっとこうかとも思いましたが、ちょっとだけやりたいことがあったので、その2を書いてみました。

STEP1 まずはテキストから

基本的に、liタグで挟んだものはスライドしてくれますので、テキストだとこんな感じになります。

  • 例えば
  • こんな
  • 単なる
  • テキストも
  • スライドできるので・・・
  • パワポみたい!!
  • まあ、使うことないと思いますが・・・

ソースはこちら

<div class="flexslider" style="height:200px; ">
	<ul class="slides" >
	<li >
	<span style="font-size:10pt;margin:10% 10%;">例えば</span>
	</li>
	<li >
	<span style="font-size:15pt;margin:10% 10%;">こんな</span>
	</li>
	<li >
	<span style="font-size:20pt;margin:10% 10%;">単なる</span>
	</li>
	<li >
	<span style="font-size:25pt;margin:10% 10%;">テキストも</span>
	</li>
	<li >
	<span style="font-size:30pt;margin:10% 10%;">スライドできるので・・・</span>
	</li>
	<li >
	<span style="font-size:40pt;margin:10% 10%;color:red;">パワポみたい!!</span>
	</li>
	<li >
	<span style="font-size:20pt;margin:10% 10%;">まあ、使うことないと思いますが・・・</span>
	</li>
</ul></div>

STEP2 アフェリエイトリンクでレコメンド風に

Amazonや楽天なんかのアフェリエイトもスライドできるので、こんな感じでレコメンド風に使ってはいかがでしょうか?

本当は横にもう少し並べてレコメンド風にしたかったんだけど、ちょっと面倒なので一つになってしまいました。
それを応用したのが、こちらのMy本棚ですので、そちら見て見てくだされ。
ソースも対して違いありません。

STEP3 つぶやきなんかも

いつの間にか、ツイッターにつぶやきをサイトにはる機能がついてましたので、それを使ってみました。お気に入りなツイートとかをカスタムポストにしてスライドさせても面白いかもしれないですね。

終わりに

いやー、思ったよりなんでもスライドしてくれました。イメージだけでなく、いろんなものをスライドさせて、創造的なホームページを作れるといいですね。
ちなみに、使用する際は、jsファイル、cssファイルの読み込みをお忘れなく。詳しくはこちらをどうぞ。
なぜかコメント欄くずれてますが、お気になさらずに。

コメントをどうぞ