Question

只是有几个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>

Answer 1

问题第二部分的答案是添加填充

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

它将成为中心。它看起来不会很漂亮，但它会起作用。

css：如何在滑块外显示prev和next链接

1 个答案: