デザインルーム パキラサミット

2011年10月24日 ｜by mieko 

最近のニーズに合わせてTOPページのアクセントとして簡単なスライドショーを入れてみました。WordPress には標準で jquery.js が入っていますが、使う時には、$ を jQuery に書き換えます。

今回は コリスさんのページ を参考に CSS を調整しました。現在表示しているパネルの位置ボタンをオリジナル画像に作り直し、コントローラーボタンも出さない設定にしてみました。

1）ヘッダーに必要なスクリプトをリンクさせる。
jquery.js
jquery.slider.min.js
jquery.slider.css

2）ヘッダーにスクリプトを入れる。

<script type="text/javascript">
jQuery(function() {
jQuery('#slider').slider({
showControls: false, // コントローラーボタン非表示
wait: 6500, // 次のフレームまでの待ち時間
fade: 500, // フェードの時間
showPosition: true, // 現在表示しているパネルの位置ボタン表示
direction: 'left' // 左にスライド
});
});
</script>

3）入れたいページにHTMLを書く。
div要素に背景として入れます。

カテゴリー : イラスト, チップス