bxSlider - 移动滑块内的控件
问题描述:
我正在尝试使用bxSlider(http://bxslider.com/)。bxSlider - 移动滑块内的控件
禁用控件(controls:false
)时,左侧和右侧的边距或填充位置在过去的位置。这意味着我失去了很多宝贵的空间。
见第一形象是我禁用控件后得到的,而第二个是它应该是宽度。我不仅浪费空间,而且当点击下一张幻灯片时,我看到上一张幻灯片的一部分不适合。
我试图强行上<ul>
标签,并在<li>
标签宽度,但它并没有帮助:
<ul id="slider1" width="660">
<li width="660">
<div class="home-slider">
<div class="slide">
<div class="description">
<h3>La cuisine au style industriel</h3>
<div class="author dark">Marie Clairet Maison</div>
<p class="gray">
J'aime beaucoup le concept de self service pour la cuisine.
J'ai vraiment l'impression d'être devant un e comptoir de self à la cantine.
Le problème, c'est qu'il faut vraiment avoir de la place pour s'offrir ce genre d'installation.
</p>
</div>
<img src="images/home-slider-placeholder.png" />
</div>
</div>
</li>
<li>Slide two content</li>
<li>Slide three content</li>
<li>And so on...</li>
</ul>
当萤火虫看,我看到该插件添加的宽度到处都是626。我没有写这个,东西生成号码:
仅供参考,我试图建立它应该看起来像这个终极的东西:
看看我需要如何将控件放在幻灯片中...
答
我在回答我自己的问题。看来使用<ul>
和<li>
不会产生与在此插件中使用<div>
相同的行为。
我的最终代码看起来像:
<script type="text/javascript">
$(document).ready(function(){
$('#slider1').bxSlider({
wrapperClass: 'bx-wrapper home-slider'
});
});
</script>
<div id="slider1">
<div class="slide">
<div class="description">
<h3>La cuisine au style industriel</h3>
<div class="author dark">Marie Clairet Maison</div>
<p class="gray">
J'aime beaucoup le concept de self service pour la cuisine.
J'ai vraiment l'impression d'être devant un e comptoir de self à la cantine.
Le problème, c'est qu'il faut vraiment avoir de la place pour s'offrir ce genre d'installation.
</p>
</div>
<img src="images/home-slider-placeholder.png" />
</div>
<div>Slide two content</div>
<div>Slide three content</div>
<div>And so on...</div>
</div>
至于滑块内移动的箭头控制,编辑bx_styles.css和改变BX-next和BX-prev的位置。
w.h.y.tried?码? – 2012-08-13 15:21:25
根据你如何布置其他东西,你会想要使用'position:absolute'或'position:relative'。但是,我无法提供具体的答案,因为您没有提供任何代码。 – Valjas 2012-08-13 15:22:56
更新了一些代码,如果有帮助。但是,我还没有接触太多。到目前为止,我正在使用所有默认设置。 – 2012-08-13 15:25:25