非常にシンプルなスライダー「FlexSlider 」を使ってみた。
デモ＆ダウンロードはコチラ。
で、使い方を見るとまずスクリプトを貼れと。
<script type="text/javascript"> $("document").ready(function(){ $('.flexslider').flexslider();}); </script>
この通り貼ったらIE8で表示されなかった。
しかしデモ画面は表示されてる。ということでデモのソースをみると
<script type="text/javascript"> $(window).load(function(){ $('.flexslider').flexslider({ animation: "slide", start: function(slider){ $('body').removeClass('loading'); } }); }); </script>
全然違う...
というわけでこのソースを貼ったらIE8,7ともに表示された。
あとHTMLは指示通り。
<div class="flexslider"> <ul class="slides"> <li> <img src="1.jpg" /> </li> <li> <img src="2.jpg" /> </li> <li> <img src="3.jpg" /> </li> <li> <img src="4.jpg" /> </li> </ul>> </div> >
他にもjavaを使っているので何かと干渉していたのかわからないけど真相は不明。
iPhoneでも表示させたかったのでどうしてもこのjQueryを使いたかったのです。
IEで見たときに左右の矢印が消えない（overflow:hiddenが効かない）問題があったのだが、これはその外側にあるdivをposition:relativeしてやることで解決。
