現在、ブートストラップを使用してサイトを構築しようとしています。bx-sliderをページにプラグインするまで、これまでのところすべてが順調に進んでいます。
現在、要素を検査するときに幅が追加width: 999999pxされており、ご想像のとおり、レイアウトがひどく見えます。スライダーの画像は同じ高さと幅です。
これがhtmlです
<div class="row-fluid">
<div id="bx-slider" class="span9">
<div>
<div>
<img src="img/working-together.png" />
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In libero ante, egestas non interdum sed, vestibulum ullamcorper dui.
Nunc consectetur commodo quam, vel accumsan erat ultrices nec.
Aenean dolor felis, tincidunt et ultricies vitae, mattis in ante.
Phasellus dapibus pretium aliquam.
Vestibulum vestibulum massa a enim facilisis volutpat. Class aptent.
</p>
</div>
</div>
<div>
<div>
<img src="img/discussion.png" />
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In libero ante, egestas non interdum sed, vestibulum ullamcorper dui.
Nunc consectetur commodo quam, vel accumsan erat ultrices nec.
Aenean dolor felis, tincidunt et ultricies vitae, mattis in ante.
Phasellus dapibus pretium aliquam.
Vestibulum vestibulum massa a enim facilisis volutpat. Class aptent.
</p>
</div>
</div>
<div>
<div>
<img src="img/facilitator.png" />
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In libero ante, egestas non interdum sed, vestibulum ullamcorper dui.
Nunc consectetur commodo quam, vel accumsan erat ultrices nec.
Aenean dolor felis, tincidunt et ultricies vitae, mattis in ante.
Phasellus dapibus pretium aliquam.
Vestibulum vestibulum massa a enim facilisis volutpat. Class aptent.
</p>
</div>
</div>
<div>
<div>
<img src="img/leadership.png" />
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In libero ante, egestas non interdum sed, vestibulum ullamcorper dui.
Nunc consectetur commodo quam, vel accumsan erat ultrices nec.
Aenean dolor felis, tincidunt et ultricies vitae, mattis in ante.
Phasellus dapibus pretium aliquam.
Vestibulum vestibulum massa a enim facilisis volutpat. Class aptent.
</p>
</div>
</div>
<div>
<div>
<img src="img/success.png" />
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In libero ante, egestas non interdum sed, vestibulum ullamcorper dui.
Nunc consectetur commodo quam, vel accumsan erat ultrices nec.
Aenean dolor felis, tincidunt et ultricies vitae, mattis in ante.
Phasellus dapibus pretium aliquam.
Vestibulum vestibulum massa a enim facilisis volutpat. Class aptent.
</p>
</div>
</div>
<div>
<div>
<img src="img/teamwork.png" />
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In libero ante, egestas non interdum sed, vestibulum ullamcorper dui.
Nunc consectetur commodo quam, vel accumsan erat ultrices nec.
Aenean dolor felis, tincidunt et ultricies vitae, mattis in ante.
Phasellus dapibus pretium aliquam.
Vestibulum vestibulum massa a enim facilisis volutpat. Class aptent.
</p>
</div>
</div>
</div>
<div class="span3">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In libero ante, egestas non interdum sed, vestibulum ullamcorper dui.
Nunc consectetur commodo quam, vel accumsan erat ultrices nec.
Aenean dolor felis, tincidunt et ultricies vitae, mattis in ante.
Phasellus dapibus pretium aliquam.
Vestibulum vestibulum massa a enim facilisis volutpat. Class aptent.
</p>
</div>
</div>
</div>
これがJSです
$(function(){
$('#bx-slider').bxSlider ({
minSlides: 1,
maxSlides: 10,
auto: true,
pager: false,
controls: false,
autoDelay: 1000,
autoHover: true,
slideWidth: 770
});});
ご覧のとおり、ウェブサイトで提案されているように、slideWidthとmaxminのスライドを追加してみました。
誰か提案はありますか？
スライダーを順序付けされていないリストに変更し、各スライドをリスト要素に変更しただけでは役に立ちません。スライダーラッパーとウィンドウは幅をうまく拾っていますが、bx-slider要素に幅を追加しているようです。