質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

2310閲覧

jQueryのbxsliderについて教えてください

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2015/11/19 00:15

bxsliderのプラグインを利用してスライドショーを作ったのですが
画像の横幅はきっちり表示されているのですが縦がカットされてしまいます
高さを指定するにはどうすればいいのでしょうか?

JavaScript

1 2<!doctype html> 3<html> 4<head> 5 <meta charset="utf-8"> 6 <title></title> 7 <link rel="stylesheet" href="jquery.bxslider/jquery.bxslider.css"> 8 <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 9 <script src="jquery.bxslider/jquery.bxslider.min.js"></script> 10 <style> 11 12 </style> 13 <script> 14 $(function(){ 15 $(".bxslider").bxSlider({ 16 mode: "horizontal", 17 speed: 1000, 18 startSlide: 0, 19 auto: true, 20 adaptiveHeight: true, 21 captions: false 22 23 }); 24 }); 25 </script> 26 27 28</head> 29<body> 30 <div id="content"> 31 <h1>bxSliderライブラリ</h1> 32 <div class="slider" style="width:600px;"> 33 <ul class="bxslider"> 34 <li><img src="img1.png" class="img"></li> 35 <li><img src="img2.png" class="img"></li> 36 <li><img src="img3.png" class="img"></li> 37 <li><img src="img4.png" class="img"></li> 38 </ul> 39 </div> 40 </div> 41 42</body> 43 44</html>

CSS

1/** 2 * BxSlider v4.1.2 - Fully loaded, responsive content slider 3 * http://bxslider.com 4 * 5 * Written by: Steven Wanderski, 2014 6 * http://stevenwanderski.com 7 * (while drinking Belgian ales and listening to jazz) 8 * 9 * CEO and founder of bxCreative, LTD 10 * http://bxcreative.com 11 */ 12 13 14/** RESET AND LAYOUT 15===================================*/ 16 17.bx-wrapper { 18 position: relative; 19 margin: 0 auto 60px; 20 padding: 0; 21 *zoom: 1; 22} 23 24.bx-wrapper img { 25 max-width: 100%; 26 display: block; 27} 28 29/** THEME 30===================================*/ 31 32 33.bx-wrapper .bx-viewport { 34 35 -moz-box-shadow: 0 0 5px #ccc; 36 37 -webkit-box-shadow: 0 0 5px #ccc; 38 39 box-shadow: 0 0 5px #ccc; 40 41 border: 5px solid #fff; 42 43 left: -5px; 44 45 background: #fff; 46 47 48/*fix other elements on the page moving (on Chrome)*/ 49 50 -webkit-transform: translatez(0); 51 52 -moz-transform: translatez(0); 53 54 -ms-transform: translatez(0); 55 56 -o-transform: translatez(0); 57 58 transform: translatez(0); 59 60} 61 62. 63bx-wrapper .bx-pager, 64.bx-wrapper .bx-controls-auto { 65 66 position: absolute; 67 68 bottom: -30px; 69 width: 100%; 70 71} 72 73 74/* LOADER */ 75 76 77.bx-wrapper .bx-loading { 78 79 min-height: 50px; 80 81 background: url(images/bx_loader.gif) center center no-repeat #fff; 82 83 height: 100%; 84 85 width: 100%; 86 87 position: absolute; 88 89 top: 0; 90 91 left: 0; 92 93 z-index: 2000; 94 95} 96 97 98/* PAGER */ 99 100 101.bx-wrapper .bx-pager { 102 103 text-align: center; 104 105 font-size: .85em; 106 107 font-family: Arial; 108 109 font-weight: bold; 110 111 color: #666; 112 113 padding-top: 20px; 114 115} 116 117 118.bx-wrapper .bx-pager .bx-pager-item, 119.bx-wrapper .bx-controls-auto .bx-controls-auto-item { 120 121 display: inline-block; 122 123 *zoom: 1; 124 125 *display: inline; 126 127} 128 129.bx-wrapper .bx-pager.bx-default-pager a { 130 131 background: #666; 132 133 text-indent: -9999px; 134 135 display: block; 136 137 width: 10px; 138 139 height: 10px; 140 141 margin: 0 5px; 142 143 outline: 0; 144 145 -moz-border-radius: 5px; 146 147 -webkit-border-radius: 5px; 148 149 border-radius: 5px; 150 151} 152 153.bx-wrapper .bx-pager.bx-default-pager a:hover, 154.bx-wrapper .bx-pager.bx-default-pager a.active { 155 156 background: #000; 157 158} 159 160/* DIRECTION CONTROLS (NEXT / PREV) */ 161 162 163.bx-wrapper .bx-prev { 164 165 left: 10px; 166 167 background: url(images/controls.png) no-repeat 0 -32px; 168 169} 170 171 172.bx-wrapper .bx-next { 173 174 right: 10px; 175 176 background: url(images/controls.png) no-repeat -43px -32px; 177 178} 179 180 181.bx-wrapper .bx-prev:hover { 182 183 background-position: 0 0; 184 185} 186 187 188.bx-wrapper .bx-next:hover { 189 190 background-position: -43px 0; 191 192} 193 194 195.bx-wrapper .bx-controls-direction a { 196 197 position: absolute; 198 199 top: 50%; 200 201 margin-top: -16px; 202 203 outline: 0; 204 205 width: 32px; 206 207 height: 32px; 208 209 text-indent: -9999px; 210 211 z-index: 9999; 212 213} 214 215 216.bx-wrapper .bx-controls-direction a.disabled { 217 218 display: none; 219 220} 221 222/* AUTO CONTROLS (START / STOP) */ 223 224 225.bx-wrapper .bx-controls-auto { 226 227 text-align: center; 228 229} 230 231 232.bx-wrapper .bx-controls-auto .bx-start { 233 234 display: block; 235 236 text-indent: -9999px; 237 238 width: 10px; 239 240 height: 11px; 241 242 outline: 0; 243 244 background: url(images/controls.png) -86px -11px no-repeat; 245 246 margin: 0 3px; 247 248} 249 250 251.bx-wrapper .bx-controls-auto .bx-start:hover, 252.bx-wrapper .bx-controls-auto .bx-start.active { 253 254 background-position: -86px 0; 255 256} 257 258.bx-wrapper .bx-controls-auto .bx-stop { 259 260 display: block; 261 text-indent: -9999px; 262 263 width: 9px; 264 265 height: 11px; 266 267 outline: 0; 268 269 background: url(images/controls.png) -86px -44px no-repeat; 270 271 margin: 0 3px; 272 273} 274 275 276.bx-wrapper .bx-controls-auto .bx-stop:hover, 277.bx-wrapper .bx-controls-auto .bx-stop.active { 278 279 background-position: -86px -33px; 280 281} 282 283 284/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */ 285 286 287.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { 288 289 text-align: left; 290 291 width: 80%; 292 293} 294 295 296.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { 297 298 right: 0; 299 300 width: 35px; 301 302} 303 304 305/* IMAGE CAPTIONS */ 306 307 308.bx-wrapper .bx-caption { 309 310 position: absolute; 311 312 bottom: 0; 313 314 left: 0; 315 316 background: #666\9; 317 318 background: rgba(80, 80, 80, 0.75); 319 320 width: 100%; 321 322} 323 324 325.bx-wrapper .bx-caption span { 326 327 color: #fff; 328 329 font-family: Arial; 330 331 display: block; 332 333 font-size: .85em; 334 335 padding: 10px; 336 337}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

adaptiveHeight: スライドの高さが違う場合、それぞれ調節して合わせるかどうか
↑これは必要ですか?

親のdivでoverflow:hiddenしていないか確認するとか
明示的に高さを指定してみて試してみて下さい。

投稿2015/11/19 00:26

yuki84web

総合スコア1857

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問