css：如何在滑塊外顯示前一個和下一個鏈接

只是有一些無法解決的css問題，所以我將它留給了默認的css。css：如何在滑塊外顯示前一個和下一個鏈接

下面是應用程序顯示圖像滑塊：Application

我的問題是如何得到，因爲它是重疊被顯示在圖像滑塊外部，而不是在滑塊的圖像兩側的Prev和Next鏈接在圖像上？

我的另一個問題是它下面的滑塊包含滑塊編號1 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>

來源

2013-02-10 user2048994

請問您可以添加html嗎？ – MirroredFate 2013-02-10 01:34:34

的答案問題的第二部分是添加填充到

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; 
}

接下來，你可能會希望將圖像作爲一個整體移動。要做到這一點，只需更改爲div.lt-container的CSS。如果您添加

margin: 0 auto; 
width: 50%;

它將變爲居中。它看起來不會很漂亮，但它會起作用。

來源

2013-02-10 01:46:44 MirroredFate

包括html和jquery更新 – user2048994 2013-02-10 02:01:22

而我的答案已更新。 – MirroredFate 2013-02-10 02:59:01

css：如何在滑塊外顯示前一個和下一個鏈接

回答

相關問題