すこし洒落た感じのフォトスライドをホームページのトップに実装したい！
そんな時に役に立つ、レスポンシブ対応のアコーディオン形のスライダー（raccordion slider） を簡単に実装する方法について今回は紹介します！
ちなみに以下のDEMOページのようなフォトスライドが実装されます。
ソースプログラムのダウンロード
https://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呼び出し行" を張りつけてください
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/jquery.raccordion.js" type="text/javascript"></script>
<script src="js/jquery.animation.easing.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function () {
$('#accordion-wrapper').raccordion({
speed: 1000,
sliderWidth: 1000,
sliderHeight: 360,
autoCollapse: false,
});
});
</script>
※ cssファイルとjsファイルの場所(パス)はご自身がファイルを置いたパスに変更してください。
- speed：スライドをクリックした際の展開の速さを指定します
- sliderWidth：スライドの横幅を指定します
- sliderHeight：スライドの高さを指定します
- autoCollapse："true"にするとマウスを上に乗せただけで写真が展開するようになります
htmlへの記述（スライドの実装）
最期に肝心のフォトスライドを実装したい箇所に、以下のコードを張り付けてください。
<div class="wrapper">
<div id="accordion-wrapper">
<div class="slide">
<img src="画像のパス" />
<div class="caption">
<a href="#">
<h1>画像のタイトルを入力</h1>
</a>
<p>画像の説明文を入力</p>
</div>
</div>
<div class="slide">
<img src="画像のパス" />
<div class="caption">
<a href="#">
<h1>画像のタイトルを入力</h1>
</a>
<p>画像の説明文を入力</p>
</div>
</div>
<div class="slide">
<img src="画像のパス" />
<div class="caption">
<a href="#">
<h1>画像のタイトルを入力</h1>
</a>
<p>画像の説明文を入力</p>
</div>
</div>
</div>
</div>
あとは画像のパスや説明文等、ご自由に変更して頂ければ実装完了です！
説明文の背景色等、より詳細に設定したい場合は"raccordion.css"の方で変更できます。
画像を追加したい場合は、＜div class="slide"＞から対応する＜/div＞までの中をコピーすれば 増やすことができます。
