RSSを購読する
follow us in feedly
ふかふか交易所 | ネットの情報をわかりやすくお届け!
RSSを購読する
follow us in feedly

ニュータウンシリーズ まとめ

マインクラフト関連記事 まとめ

VR関連記事 まとめ

トップ ゲーム 動画 ホームページ 掲示板 お問い合わせ サイトマップ ページ下部へ

ホームページカテゴリ 新着記事

サイト内検索

過去7日間の人気記事

  • 総合
  • ゲーム
  • 動画
  • ホームページ

ホーム > ホームページカテゴリー No.11 ~ No.20 > 記事No.15

ホームページにアコーディオンのようなフォトスライドを簡単に実装する方法

← 前の記事

次の記事 →

raccordion slider

すこし洒落た感じのフォトスライドをホームページのトップに実装したい!

そんな時に役に立つ、レスポンシブ対応のアコーディオン形のスライダー(raccordion slider) を簡単に実装する方法について今回は紹介します!

ちなみに以下のDEMOページのようなフォトスライドが実装されます。

DEMOページ

ソースプログラムのダウンロード

http://egrappler.com/jquery-responsive-horizontal-accordion

今回実装する「raccordion slider」の配布先である上記のサイトにアクセスし、 ソースコードの下あたりにある"Download Source Code"ボタンを押して.zipフォルダをダウンロードしてください。

ダウンロードが完了したら.zipフォルダを解凍し、今回使用する
・raccordion.css
・jquery.raccordion.js
・jquery.animation.easing.js
を取り出してホームページのローカルフォルダの任意の場所に置いてください。

htmlへの記述(プログラムの呼び出し)

次に今回フォトスライドを実装したいhtmlの<head></head>内に、以下の "jQuery呼び出し行" "raccordion呼び出し行" を張りつけてください

※ cssファイルとjsファイルの場所(パス)はご自身がファイルを置いたパスに変更してください。

speed:スライドをクリックした際の展開の速さを指定します
sliderWidth:スライドの横幅を指定します
sliderHeight:スライドの高さを指定します
autoCollapse:"true"にするとマウスを上に乗せただけで写真が展開するようになります

htmlへの記述(スライドの実装)

最期に肝心のフォトスライドを実装したい箇所に、以下のコードを張り付けてください。

あとは画像のパスや説明文等、ご自由に変更して頂ければ実装完了です!

説明文の背景色等、より詳細に設定したい場合は"raccordion.css"の方で変更できます。

画像を追加したい場合は、<div class="slide">から対応する</div>までの中をコピーすれば 増やすことができます。

関連記事はこちら

▼ 一言コメントをどうぞ!

Widget is loading comments...

過去7日間の人気記事

マインクラフト関連記事 まとめ

VR関連記事 まとめ

Aviutl(動画編集)関連記事まとめ

AR関連記事 まとめ

ご意見・ご質問等は 掲示板へ!

コメントを公開されたくない場合は メッセージフォームへ!


当サイトについて  月極広告の募集

©Copyright fukafuka295.jp 2016 All rights reserved.

トップ ゲーム 動画 ホームページ 掲示板 お問い合わせ サイトマップ ページ上部へ