javascript bxSlider - 在滑块内移动控件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11937155/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bxSlider - move controls inside the slider
提问by Nathan H
I am trying to work with bxSlider (http://bxslider.com/).
我正在尝试使用 bxSlider ( http://bxslider.com/)。
When disabling the controls (controls:false), the margins or padding on the left and right where the controls used to be are still here. Which means I loose a lot of precious space.
禁用控件 ( controls:false) 时，控件以前所在的左侧和右侧的边距或填充仍然在这里。这意味着我失去了很多宝贵的空间。
See the first image is what I get after disabling controls, and the second one is the width it was supposed to be. Not only do I waste space, but also when clicking on the next slide I see a part of the previous slide that didn't fit.
看到第一个图像是禁用控件后我得到的图像，第二个是它应该的宽度。我不仅浪费空间，而且在单击下一张幻灯片时，我会看到上一张幻灯片的一部分不适合。
I've tried to force the width on the <ul>tag and on the <li>tag but it didn't help:
我试图强制<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 compttheitroad de self à la cantine.
Le problème, c'est qu'il faut vraiment avtheitroad 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>
When looking at Firebug, I see that the plugin is adding a width of 626 everywhere. I didn't write this, something is generating that number:
在查看 Firebug 时，我发现该插件在各处都增加了 626 的宽度。我没有写这个，有些东西正在生成那个数字：
For reference, the ultimate thing I'm trying to build it supposed to look like this:
作为参考，我试图构建它的最终结果应该是这样的：
See how I need to put the controls INSIDE the slide...
看看我需要如何将控件放在幻灯片中...
回答by Nathan H
I am answering my own question. It seems that using <ul>and <li>does not generate the same behavior as using <div>in this plugin.
我正在回答我自己的问题。似乎使用<ul>和<li>不会产生与<div>在此插件中使用相同的行为。
My final code looked like:
我的最终代码如下所示：
<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 compttheitroad de self à la cantine.
Le problème, c'est qu'il faut vraiment avtheitroad 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>
As far as moving the arrow controls within the slider, edit the bx_styles.css and change the locations of bx-next and bx-prev.
至于在滑块内移动箭头控件，请编辑 bx_styles.css 并更改 bx-next 和 bx-prev 的位置。
