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 - 移動滑塊內的控件

回答

相關問題