2013年9月21日 3:41 PM  カテゴリー: javascript, jQuery, web制作, スライドショー

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

もともと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

ABOUT

仕事と子育てを楽しむパパです。 趣味は漫画、映画、海外ドラマ、波乗り、スノボ、カメラ。 最近いけてないけど旅行も大好き。仕事はweb以外にも企業向け技術教育事業、投資、ディレクション、アパレル、写真、店舗プロデュースなどなどなんでもこなします。

Twitter