javascript - bxSlider - 在 slider 内移动控件

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>

就移动 slider 内的箭头控件而言，编辑 bx_styles.css 并更改 bx-next 和 bx-prev 的位置。