jQueryスライドショー「bxSlider」のレイアウトをカスタマイズする際に注意すべきたったひとつのポイント
1年以上前の記事です。内容が古い可能性があります。
なんとも有名なjQueryを使用したスライドショー(スライダー)「bxSlider」ですが、
デザインがなかなか思うようにいかなくて嫌いになりそうになっていました。
が、その理由がわかったので報告したいと思います。
なお、 「bxSlider」の設置等に関しては以下のサイト等を参考にしてください。
■ jQuery Content Slider | Responsive jQuery Slider | bxSlider
□ jQueryスライドショー「bxslider」の使い方まとめ – NAVER まとめ
今回設置させていただいたスライドショー。
右上、通常の写真風な部分で「bxSlider」を使っています。
まず、先ほど紹介したサイトからHTML部分のみ抽出してみます。
<ul class="bxslider">
<li><img src="/images/pic1.jpg" /></li> <li><img src="/images/pic2.jpg" /></li>
<li><img src="/images/pic3.jpg" /></li>
<li><img src="/images/pic4.jpg" /></li>
</ul>
で、これをどのようにアレンジしてレイアウトしたかというと。
<ul class="bxslider" id="main_img">
<li><img src="/images/pic1.jpg" /></li> <li><img src="/images/pic2.jpg" /></li>
<li><img src="/images/pic3.jpg" /></li>
<li><img src="/images/pic4.jpg" /></li>
</ul>
と言った具合に、<ul>に対してIDを入れてwidth、marginやpadding、position:absolute等の指定をしていたわけです。
が、これが間違いでした。
なぜかは知らないけれど、最後のコマが白落ちしたり、
どうしても、右側にイメージがはみ出してしまったり、
他、いじればいじるほど問題が発生してしまい、いい加減、嫌になってきたわけです。
おそらく、「bxSlider」標準の「jquery.bxslider.css」 と、デザイン用に作ったCSSがお互い喧嘩してしまったのでしょう。
じっくりしっかり解析してやっていけばもしかしたらこのままでも解決したかもしれません。
ただ、この状態で頑張るよりも、HTMLの書き方を変えることでなんとも簡単に解決することができました。
こう書けばいい。
<div id="main_img">
<ul class="bxslider">
<li><img src="/images/pic1.jpg" /></li> <li><img src="/images/pic2.jpg" /></li>
<li><img src="/images/pic3.jpg" /></li>
<li><img src="/images/pic4.jpg" /></li>
</ul>
</div>
つまり、<ul>を<div>で囲んでそのDIVにwidth、marginやpadding、position:absolute等の指定をすればよかったんです
この場合、親子関係になるので喧嘩せず、「#main_img」に書いたレイアウト用のCSSにほぼ準じてスライダーが表示されるようになってくれます。
実は「bxSlider」は、<ul>、<li>をそれぞれ<div>に変えても動くのですが、
当初は<div>を使っていたため、なるべく<div>を入れ子にしたくなかったという理由から「class=”bxslider”」と同じところに「id=”main_img”」を書いたのです。
が、それがいかんかったわけですね。
ちなみに、自分の場合はページャーもコントローラーも表示させない設定にしています。
$(document).ready(function(){ $('.bxslider').bxSlider({
auto:true,
pager: false,
controls: false,
});
});
なお、こちらで横幅指定「slideWidth」の設定はする必要はありません。
■ 今日のまとめ ■
「bxSlider」でレイアウトをするときはスライダーの要素を<div>等で囲ってあげて、その<div>に対してCSSでレイアウトしてあげるとうまくいく。
覚えておきましょう。
アドセンス広告メイン
関連記事
-
-
佐々木岳久展「記憶の交錯」@ギャラリーユニグラバス銀座館
1年以上前の記事です。内容が古い可能性があります。知り合いの方が個展を開くことに …
-
-
Web上でCookie(クッキー)をチェック「Cookie-Checker」
1年以上前の記事です。内容が古い可能性があります。何でもかんでもWebさえあれば …
-
-
プロット・ファクトリーがYahoo!でスパム判定【第2章】 (5/8追記)
1年以上前の記事です。内容が古い可能性があります。プロット・ファクトリーとは開店 …
-
-
ネットで印刷、印刷通販の「グラフィック」を使ってみた【発注編】
1年以上前の記事です。内容が古い可能性があります。ある人に頼まれてA4三つ折のリ …
-
-
ワードプレス(WordPress)にRSSを読み込ませる方法 #wp
1年以上前の記事です。内容が古い可能性があります。ワードプレスにはRSSを読み込 …
-
-
モリサワのクラウドフォントサービス「TypeSquare」が始まっていた
1年以上前の記事です。内容が古い可能性があります。Webでモリサワフォントが使え …
-
-
WordPressでテーマカスタマイズ、ヘッダー(header.php)、フッター(footer.php)で消してはいけないプログラム #wp
1年以上前の記事です。内容が古い可能性があります。自分でカスタマイズしたWord …
-
-
Googleのロゴがゴシック系に変更。Futuraに似すぎ、パクリ疑惑で撤回か?
1年以上前の記事です。内容が古い可能性があります。って話になりかねんですなこの国 …
-
-
mixiのチェックボタンをつけてみた【後編】
1年以上前の記事です。内容が古い可能性があります。さて、前回なんとか「mixiチ …
-
-
僕がデザイナーを辞めた理由
1年以上前の記事です。内容が古い可能性があります。休みに入ったけど、カレンダーが …
Comment
そもそも
と
ではスタイルを指定している対象が違う
「おそらく、「bxSlider」標準の「jquery.bxslider.css」 と、デザイン用に作ったCSSがお互い喧嘩してしまったのでしょう。」
いいえ、あなたのCSSの解釈が間違っているだけです。
そもそも付属してあるbxslider.cssでその辺の調整はできるのに何故新たにIDを付け加えなければならないのか疑問です。
失礼ですがこういう記事を書くのならもう少し勉強されてからの方がいいと思います。
WEB業界で働くものとして間違った情報が氾濫してほしくないのと、間違った情報でも参考にしてしまう人はたくさんいるので。