Webの記録

jquery.nivo.slider.jsを使ってリッチなスライドショーにチャレンジ♪

投稿日:

この記事は約 4 分で読めます。

今回も数枚の画像を使ったスライドショーを作りたいと思います。

見た目がキレイで、ユーザーが自由に前後の画像へ移動する事も出来て、ちょっとしたテキストも入れられるという・・・見た目も機能も抜群な「jquery.nivo.slider.js」を使いたいと思います。

sample9画面イメージ

設置方法。

下準備。

スライドしたい画像を数枚用意します。
スライドした枚数分だけ画像を用意します。サムネイル画像は今回ナシです。

jsファイルのダウンロード。
Nivo Slider – The Most Awesome jQuery Image Slider
から ファイルをダウンロードします。

headerの記述。

HTML ファイルのheaderでjsファイルの関連付けの記述。

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
スライドショー用のScriptをheaderに記述。
<script type="text/javascript">
      $(window).load(function() { 
        $('#slider').nivoSlider();     });
</script>
body部分に表示したい画像のパスをliの中に記述。

titleをつけると、キャプションを付けられます。

<div id="slider" class="nivoSlider">
     <img src="画像のパス" alt="" title="キャプション" />
     <img src="画像のパス" alt="" />
     <img src="画像のパス" alt="" title="キャプション" />
     <img src="画像のパス" alt="" title="キャプション" />
</div><!-- /#slider -->
CSSを記述。(配布サイトのをいじると楽だと思います)

ファイルをそのままダウンロードすると、3つのテーマが入っています。
これを参考に作るととてもキレイなスライドショーが出来上がります♪
Nivo Slider – The Most Awesome jQuery Image Sliderのデモを参考にされると良いかもしれません。

ライセンス:MIT

 

-Webの記録
-, , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

カラーミーショップ無料テンプレート「Bit」のフリーページ表示順を変えてみた

この記事は約 1 分で読めます。 比較的安価でネットショップ初心者でも始められる「カラーミーショップ」。 スマホからのアクセスにも対応できる、シンプルなレスポンシブデザインの無料テンプレート「Bit」 …

no image

フッターをブラウザの下部に固定する方法

この記事は約 1 分で読めます。 コンテンツが少ない場合、フッターの下に余白が出来てしまいます。 さすがに、ちょっと気になる・・・ってワケで、今回はフッターをブラウザの下部に固定する方法をいろいろ試し …

no image

WordPressでオリジナルテーマ作りにチャレンジ5【sidebar.php編】

この記事は約 1 分で読めます。 WordPressのオリジナルテーマ作りにチャレンジしています。 今回は、「sidebar.php」の部分を作りたいと思います。 私が作りたいオリジナルテーマの「si …

no image

jquery.gmap3.jsを使って、Googlemapを簡単にカスタマイズ♪

この記事は約 1 分で読めます。 今回は、GoogleMapを埋め込んで、カスタマイズ出来るjQuery プラグイン「jquery.gmap3.js」。使ってみたら楽に出来たので、メモです。 配布元: …

no image

パソコンでスマホやタブレットの表示を確認出来るGoogle Choromeデベロッパーツール

この記事は約 1 分で読めます。Webサイトを制作する時、コーディングしながら都度いろんなブラウザで表示確認をします。 レスポンシブサイトとなると、今まで以上に表示をいろいろ確認しながら・・・の作業に …