0

理解できなかったcssの問題がいくつかあるだけなので、デフォルトのcssに戻しました。

以下は、画像スライダーを表示するアプリケーションです。アプリケーション

私の質問は、画像の上に重なっているため、スライダー内ではなく、画像スライダーの外側の画像のいずれかの側にリンクを表示するPrev方法です。Next

私の他の質問はスライダーの下にあり、スライダー番号が含まれている1 2 3ので、スライダーの最初の2番目と3番目の画像を確認し、それらを選択します。私の質問は、数字が近すぎないように数字を分離する方法です。

Prev and Next以下はリンクのCSSです。

ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ul.bjqs-controls.v-centered li a{position:absolute;}
ul.bjqs-controls.v-centered li.bjqs-next a{right:0;}
ul.bjqs-controls.v-centered li.bjqs-prev a{left:0;}

以下は、画像の下部にある数字のcssです。

ol.bjqs-markers{list-style: none; padding: 0; margin: 0; width:100%;}
ol.bjqs-markers.h-centered{text-align: center;}
ol.bjqs-markers li{display:inline;}
ol.bjqs-markers li a{display:inline-block;}

HTMLとjquery：

 <div id="banner-image_<?php echo $key; ?>">
 <ul class="bjqs">
<?php foreach ($arrImageFile[$key] as $i) { ?>
<li><img alt="<?php echo $i; ?>" height="200" width="200" src="<?php echo 'ImageFiles/'.$i; ?>"></li>
<?php } ?>
</ul>
</div>

         <script type="text/javascript">

jQuery(document).ready(function($) {

         $('#banner-image_<?php echo $key; ?>').bjqs({
            animtype      : 'slide',
            height        : 200,
            width         : 200,
            responsive    : true,
            randomstart   : false,
            automatic : false
          });  
          });

          </script>
4

1 に答える 1

0

質問の2番目の部分への答えは、パディングを追加することです

ol.bjqs-markers li{display:inline;}

ここに示されているように：http：//jsfiddle.net/uYXkA/

OPがHTMLを投稿した後、最初の部分に答えます。

編集：わかりました、jqueryがあなたの前と次のためにそれ自身のcssを作成するように見えます。私たちはこれを回避することができます-これをあなたのCSSに追加するだけです：

ul.bjqs-controls.v-centered li.bjqs-prev a {
    left: -40px;
}

と：

ul.bjqs-controls.v-centered li.bjqs-next a {
    right: -40px;
}

次に、画像全体をシフトしたいと思うでしょう。これを行うには、のcssを変更するだけです div.lt-container。追加する場合

margin: 0 auto;
width: 50%;

中央に配置されます。見た目はあまり良くありませんが、機能します。

于 2013-02-10T01:46:44.580 に答える