小编Cra*_*ker的帖子

尝试正确对齐bxslider边框,使其适合我的图像.

我尝试了很多不同的图像,bxslider在不同的设置.

如果我删除"Mode:'Fade"和"Captions:"True"选项,Bxslider实际上将适合图像.虽然我可以没有字幕,但我确实希望进行淡入淡出过渡.

你可以在这里看到我的意思http://www.dennysplace.co.uk/

这也是一个有效的jsfiddle http://jsfiddle.net/FLuRH/

代码如下

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<link href="js/lib/jquery.bxslider.css" rel="stylesheet" />


<ul class="bxslider">
  <li><img src="images/barbers1.jpg" title="Dennys Place Gentlemens Barbers"></li>
  <li><img src="images/display.jpg" title="Tunbridge Wells"></li>
  <li><img src="images/photos11.jpg" title="The famous heads of Dennys Place"></li>
 </ul>

<script type="text/javascript">
 $(document).ready(function(){
$('.bxslider').bxSlider({
    mode: 'fade',
    captions:true,
    auto: true

});
 });
</script>

和CSS在这里

.bx-wrapper {
position: relative;
margin: 0 0 60px;
padding: 0;
*zoom: 1;
}

.bx-wrapper img {
width: 100%;
display: block;
}

/** THEME
===================================*/

.bx-wrapper .bx-viewport {
-moz-box-shadow: 0 0 …