bxsliderで2枚目以降の画像もブラウザ幅いっぱいに表示してみる。

LINEで送る
Pocket

ブラウザの横幅いっぱいに「カルーセル風に実装」

もともとbxsliderにはカルーセル表示をすることができるオプションがあるんですがコンテンツの幅を固定、またはmax-widthを指定してある場合、少し工夫をしてあげないとうまくいきませんでした。それからnext/prevのアイコンをクリックするとスライドショーが停止して動かなくなるという現象が起きていたので動くように変更しました。

以下サンプルページ

http://gallery-lounge.com/demo/bxslider/

bxslider

bxslider

head

bxsliderを自分のサーバーへアップロードし以下記述。easingを適用するならダウンロードしたファイル内にあるeasingファイルもアップロードしてください。

※ファイルパスはご自身の環境に合わせて記述。

html

htmlに関しては以下の通り。目的とした表示に合わせて変更してください。※ulで作成しましたがdivでもok。

css

  • #image-bloc:高さを固定
  • .bx-viewport:幅を親要素の幅に指定※画像のサイズに合わせてしまうと末尾のクローンが下に回り込みレイアウトが崩れます。
  • .bx-viewport:非表示になっている2枚目以降の画像をoverflow:visible!importantで再表示。
  • .main-container:これを指定しないとブラウザ最下部にスクロールバーが出てしまうのでoverflow:hiddenで解除。

js

オプションはお好みで指定してください。
コントロールクリック後の自動再生※デフォルトでは停止のままになります。
slidewidthを画像サイズに指定※shadowを含めたサイズが好ましいです。

これで表示されるはずです。不足箇所あったらごめんなさい。w

One thought on “bxsliderで2枚目以降の画像もブラウザ幅いっぱいに表示してみる。

  1. […] 超軽量で実装が簡単で有名なjQueryスライダーのひとつ。使用頻度としてはbxsliderよりも個人的には多いかも。簡単な割にレスポンシブに対応しているしオプションも結構豊富なところが […]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">