bxSlider - 移动滑块内的控件

我正在尝试使用bxSlider（http://bxslider.com/）。bxSlider - 移动滑块内的控件

禁用控件（controls:false）时，左侧和右侧的边距或填充位置在过去的位置。这意味着我失去了很多宝贵的空间。

enter image description here

见第一形象是我禁用控件后得到的，而第二个是它应该是宽度。我不仅浪费空间，而且当点击下一张幻灯片时，我看到上一张幻灯片的一部分不适合。

我试图强行上<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。我没有写这个，东西生成号码：

enter image description here

仅供参考，我试图建立它应该看起来像这个终极的东西：

enter image description here

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

来源

2012-08-13 Nathan H

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

我在回答我自己的问题。看来使用<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的位置。

来源

2012-08-13 16:32:03

bxSlider - 移动滑块内的控件

回答

相关问题