1

bxSlider ( http://bxslider.com/ ) を使用しようとしています。

コントロールを無効にすると ( controls:false)、コントロールがあった左右の余白またはパディングはそのまま残ります。つまり、多くの貴重なスペースを失います。

ここに画像の説明を入力

最初の画像はコントロールを無効にした後に得られるもので、2 番目の画像は本来あるべき幅です。スペースを無駄にするだけでなく、次のスライドをクリックすると、前のスライドの一部が収まりません。

<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 の幅を追加していることがわかります。私はこれを書いていません。何かがその番号を生成しています:

ここに画像の説明を入力

参考までに、私が構築しようとしている最終的なものは次のようになります。

ここに画像の説明を入力

スライド内にコントロールを配置する方法を参照してください...

4

1 に答える 1

4

私は自分の質問に答えています。<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 の場所を変更します。

于 2012-08-13T16:32:03.857 に答える