自動でスクロールするスライドショーEasy Slider

コンテンツを滑らかにスクロールするスライドショーのスクリプト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>

では、がんばってください。

«
»

コメントはまだありません

コメントは管理者の承認後に表示されます




Comment