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>和<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的位置。