0001 HTMLでスライダーを使用する方法

HTMLでスライダーを行う方法


1.bxSlider(http://bxslider.com)からファイルをダウンロード
 左上にあるDownloadを押すことでダウンロードできます。


2.テンプレートのhtmlを作成

2.1 読み込むべきソースをインクロードする。

headerタグの内に以下のソースを追加する。
注意:jquery.bxslider.min.js,jquery.bxslider.cssは、環境に合わせて
パスを変更する。

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />


2.2 画像を組み込む
bodyタグ内に以下のソースを追加する。
注意:画像のパスについては、環境に合わせて変更する。

<ul class="bxslider">
<li><img src="./jquery/images/pic1.jpg" /></li>
<li><img src="./jquery/images/pic2.jpg" /></li>
<li><img src="./jquery/images/pic3.jpg" /></li>
<li><img src="./jquery/images/pic4.jpg" /></li>
</ul>


2.3 初期処理を設定する

header タグ内に以下のソースを追加する。

注意;class名(.bxsliderの箇所)については、2.2で設定したクラス名を設定する。

<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>


3.完了

管理者オススメのアプリ

簡単に日々のスケジュールを管理できる無料のphoneアプリです。
スケジュール、シフト管理、TODO,お小遣い管理、メモなどいろいろ使用できるアプリ。
メニューの並び替えも自由!


すごい手帳を使ってみる

アクセス数: 無料カウンター




トラックバック(0)

トラックバックURL: http://smartwolf.sakura.ne.jp/Blog/mt-tb.cgi/132

コメントする

ウェブページ

Powered by Movable Type 5.2.7