我正在使用最新的 bjqs 和 jquery 版本。我没有编辑任何 bjqs css。问题是当页面加载时,第二张图像位于 View 中。当幻灯片滑入其他图像可见的位置时,幻灯片将继续此操作。但是,如果我以任何方式调整窗口大小,bjqs 就会执行其应该执行的操作,并调整图像大小,以便只有一个可见。
我明白了:/image/3edFN.jpg
这是我的标记。
<div id="container">
<-- slider in here -->
</div>
#container {max-width: 1600px;}
jQuery(document).ready(function($) {
$('#banner-slide').bjqs({
animtype : 'slide',
height : 520,
width : 1600,
responsive : true,
});
});
最佳答案
我在这里复制类似的内容:http://jsfiddle.net/Ru5vp/2
html:
<!-- start Basic Jquery Slider -->
<ul class="bjqs">
<li><img src="http://www.basic-slider.com/img/banner01.jpg" title="Automatically generated caption" /></li>
<li><img src="http://www.basic-slider.com/img/banner02.jpg" title="Automatically generated caption" /></li>
<li><img src="http://www.basic-slider.com/img/banner03.jpg" title="Automatically generated caption" /></li>
</ul>
<!-- end Basic jQuery Slider -->
</div>
<!-- End outer wrapper -->
CSS:
ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{position:absolute; display:none;}
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;}
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;}
p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}
#container {max-width: 1600px;}
jQuery 初始化:
jQuery(document).ready(function($) {
$('#banner-slide').bjqs({
animtype : 'slide',
height : 520,
width : 1600,
responsive : true,
});
});
图像的尺寸与js中声明的高度和宽度不同。如果我将尺寸更改为等于实际尺寸,则效果很好。
我注意到,如果我使用高度:826,宽度:1600
(按比例缩放图像),则图像的设置与图像显示的类似。如果我调整结果窗口的大小,图像的大小就会像您所描述的那样调整。
关于javascript - 基本 jQuery slider 在页面加载时无法正确显示(响应式设置),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19300675/