コンテンツを滑らかにスクロールするスライドショーのスクリプトEasy Slider 1.7。
スクロールのスピードや静止時間なども自由に設定することが出来ます。
見栄えのいいスクリプトなのですが、実装が結構めんどくさいのが難点。
ダウンロードしたCSSはそのままでは使用出来ません。
body～preや#content、それと#prevBtn・#nextBtn（左右のボタン）の位置指定を、導入するサイトのデザインに合わせて修正する必要があります。
CSSに不慣れな人にはかなり難しいかも。
※サンプルの左右のボタンはオリジナルですので、同梱されているものとはデザインが違います
ダウンロード
現在の最新バージョンは1.7です。
「Download easySlider 1.7」をクリックしてzipファイルをダウンロード、解凍してください。
Easy Slider 1.7
jquery.jsは同梱されています。
実装手順
解凍したeasyslider1.7フォルダに入っている「easyslider1.7」を、サーバーに丸ごとアップロード。
<head>～</head>に以下を記述。
speedとpauseで速度と静止時間を調整します。数値を小さくするほど早くなります。
<link rel="stylesheet" href="http://サイトURL/easyslider1.7/css/screen.css" type="text/css" /> <script type="text/javascript" src="http://サイトURL/easyslider1.7/js/jquery.js"></script> <script type="text/javascript" src="http://サイトURL/easyslider1.7/js/easySlider1.7.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider({ auto: true, continuous: true, speed: 800, pause: 2000 }); }); </script>
Easy Sliderを表示させる場所に以下のように記入。
id=contentというプロパティは既に使用されている可能性が高いので、別の名称にするか<div style="position: relative;">に書き換えた方がいいかも知れません。
<div id="content"> <div id="slider"> <ul> <li><a href="リンク先URL"><img src="画像URL" /></a></li> <li><a href="リンク先URL"><img src="画像URL" /></a></li> <li><a href="リンク先URL"><img src="画像URL" /></a></li> <li><a href="リンク先URL"><img src="画像URL" /></a></li> <li><a href="リンク先URL"><img src="画像URL" /></a></li> </ul> </div> </div>
では、がんばってください。
参考にさせていただきトライしました。ありがとうございます♪
そこでIEやsafariで見ると大丈夫なのですが、firefoxで見るとスライドする画像が右端のほうにズレてしまうのはどこらへんのCSSを見たほうがいいのでしょうか？教えていただければ幸いです。
コメント by nagao — 2011年5月6日 @ 3:17 PM
ul と ul li の padding と margin を 0 に、 list-style を none にします。
当記事の実装例のように（div id=”slider”）としているなら、
#slider ul {
margin: 0;
padding: 0;
list-style: none;
}
#slider ul li {
margin: 0;
padding: 0;
}
とCSSに追加すれば良いかも知れません。
コメント by Daisuke — 2011年5月7日 @ 6:17 AM
コメントにご返答いただきましてありがとうございます♪表示できるようになりました♪助かりました！！色々と参考にさせていただきますm(_ _)m
コメント by nagao — 2011年5月7日 @ 12:23 PM
ボタンの変更ってどのようにやればいいのでしょうか？
ちなみにhtmlを少しかじった程度です…
コメント by Yoi — 2011年5月26日 @ 9:54 PM