javascript - bxSlider - 在滑块内移动控件

Question

我正在尝试使用 bxSlider ( http://bxslider.com/ )。

禁用控件 ( 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>

在查看 Firebug 时，我看到插件到处都添加了 626 的宽度。我没有写这个，有些东西正在生成那个数字：

作为参考，我试图构建的最终东西应该是这样的：

看看我需要如何将控件放在幻灯片内...

Answer 1

我正在回答我自己的问题。似乎使用<ul>and<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 的位置。