新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

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でレイアウトしてあげるとうまくいく。 

覚えておきましょう。 

 - デザイン, プログラミング

アドセンス広告メイン

Comment

  1. insp より:

    そもそも

        ではスタイルを指定している対象が違う
        「おそらく、「bxSlider」標準の「jquery.bxslider.css」 と、デザイン用に作ったCSSがお互い喧嘩してしまったのでしょう。」
        いいえ、あなたのCSSの解釈が間違っているだけです。
        そもそも付属してあるbxslider.cssでその辺の調整はできるのに何故新たにIDを付け加えなければならないのか疑問です。
        失礼ですがこういう記事を書くのならもう少し勉強されてからの方がいいと思います。
        WEB業界で働くものとして間違った情報が氾濫してほしくないのと、間違った情報でも参考にしてしまう人はたくさんいるので。

    Message

    メールアドレスが公開されることはありません。

      関連記事

    ブログの角丸部分をCSS3の「border-radius」プロパティに変えてみた【Webデザイン】

    1年以上前の記事です。内容が古い可能性があります。今年、HTML5及びCSS3が …

    ツイッターアカウントで目にする逆英字(ɐsıɹoN)の作り方

    1年以上前の記事です。内容が古い可能性があります。ツイッターのユーザー名に普通と …

    ボタンがなくてもツイートできるブックマークレット【ツイッター】

    1年以上前の記事です。内容が古い可能性があります。以前、Facebookで「いい …

    no image
    iPadスゲー!「プロジェクションマッピング」が簡単につくれちゃう

    1年以上前の記事です。内容が古い可能性があります。そもそもプロジェクションマッピ …

    「いいね」ボタンがなくても「いいね」ができるブックマークレット【Facebook】

    1年以上前の記事です。内容が古い可能性があります。Facebook(フェイスブッ …

    no image
    JavaScriptでありがちな9つのシマッタ

    1年以上前の記事です。内容が古い可能性があります。「JavaScriptでありが …

    CSS2.1まとめ書き-background編(HTML・CSSリファレンス)

    1年以上前の記事です。内容が古い可能性があります。CSS2.1まとめ書きも3回目 …

    GIMP2(ギンプ2)はコピペでレイヤーが作れない

    1年以上前の記事です。内容が古い可能性があります。お久しぶりに画像編集ソフトGI …

    no image
    Googleのプラスワン(+1)ボタンをつけてみた(7/1追記)

    1年以上前の記事です。内容が古い可能性があります。日本ではまだサービスを開始して …

    WordPress(ワードプレス)で楽に表組み(テーブル)を書くためのプラグイン「Editor Extender」 #wp

    1年以上前の記事です。内容が古い可能性があります。WordPressで記事を書く …

    血液型オヤジ