0
我目前正在嘗試使用bootstrap構建網站。直到我將bx-slider插入到頁面中時,一切都進展順利。Bx滑塊添加大量寬度
當我檢查元素時,它會添加寬度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和最大最小幻燈片有網站的建議。
有沒有人有任何建議?
只是將滑塊更改爲無序列表,每張幻燈片都是列表元素,無濟於事。滑塊包裝和窗口正在拾取寬度,但它似乎將寬度添加到bx-slider元素。