flexsliderを使ってみる！

まだjQueryの文法等はよく分からないけど、
世の中には賢いお方達が作った便利なプラグインが沢山あるので
それをHP内で差し込めるようになることが重要と聞きました。

トイウコトデ、

早速チャレンジ！

FlexSlider
http://flexslider.woothemes.com/thumbnail-controlnav.html
FlexSlider2を使って▼こんなスライドショーを作ってみました。

簡単でかっこいいｗｗｗ
カスタマイズしたくなった場合は、
▼こーんな便利なサイトもぐぐると沢山出てきます。
http://sho-tem.com/archives/354

▼私がしたカスタマイズはこちら▼
------------------------
ふわっと画像を表示
------------------------
jQuery(document).ready(function($) {
$('#flexImg').fadeIn(3000);
$('.flexslider').flexslider({
slideshow: true,
slideshowSpeed: 3000,
animationDuration: 600,
pauseOnAction: false,
controlNav: "thumbnails"
});
});

------------------------
キャプションを挿入（HTMLソースコードを修正）
------------------------
<li data-thumb="images1.jpg">
<img src="images1.jpg" >
<p class="flex-caption">Cheesecake brownie</p>
</li>

------------------------
少しデザイン変更（CSS追加）
------------------------
.flex-caption{
font-family: メイリオ, Arial;
float: left;
margin-top: 50px;
margin-left: 50px;
font-size: 150px;
text-align: center;
position: absolute;
top: 0px;
color: #339ACD;
text-shadow: 5px 5px #CCCCCC;
font-weight: bolder;
}

body{
background-color:#F7E9D2;
text-align:center;}

#wrap{
margin:0 auto;
width: 70%;}
------------------------