極意(38)アイキャッチ上に2つのスライドショー

ユーザーフォーラムでの質問内容には、びっくりさせられることが多くあります。
「何故、そんなことをしたいのか?」等、計り知れない質問が飛び出します。
でも一見、馬鹿々々しい質問でも、冷静に考えてみると検討する余地がある質問でもあります。

今回、標題のように「アイキャッチ上に2つのスライドショーを設置したい」に解答した結果を、当ページでテスト検証した内容を公開します。

尚、ひとつ発見したことがあります。2つのスライドショーだから発見できたのかも知れませんが、アイキャッチ上の2つのスライドショーは、同時に自動的に動き出しますが、マウスカーソルを左右どちらかの画像の上に置くと、カーソルを置いた方のスライドショーは止まります。


上記のアイキャッチのおまじないです。

#eyecatch(fit){{{{
#cols(6,6){{{
#bs_carousel(nobutton,height=380){{
auto_2ldpvX.jpg
auto_6II3dh.jpg
auto_sbSocN.jpg
auto_0mvOel.jpg
auto-puzDzB.jpg
}}
====
#bs_carousel(nobutton,height=380){{
Win7WP009.jpg
Win7WP010.jpg
Win7WP011.jpg
Win7WP012.jpg
Win7WP013.jpg
}}
}}}
}}}}


解説します

  1. 先ず、アイキャッチ上に2段の段組を設定します。
  2. 左右それぞれの段組内にスライドショーを設置します。
  3. 出来れば、左右のスライドショーの画像サイズを同一サイズにすると良いでしょう。
  4. 今回、左側の画像サイズが 571x384、右側が 550x343 と違っていました。
  5. そこで左右で height=380 と指定して左右の画像の高さを合わせています。
  6. その辺の調整は実際にやってみた上でheightの数値を決めれば良いと思います。
  7. 更に nobutton で切り替えボタンとインジケーターを非表示にしています。


戻る


上記の関連記事はお役に立ちましたか?

  • 下記に投票して戴けると嬉しく思います。
    選択肢 投票
    役に立った 3  
    役に立たなかった 0  


ご意見箱