[英]Jssor Slider: Responsive Code
我使用的是Jssor Slider( http://www.jssor.com/demos/slider-cluster.html )。 由于我的幻灯片非常大(宽度约为2000像素),因此它们可以在较小的设备(甚至是iPad)上显着扩展。 我不介意在较小的设备上对称地裁剪侧面(左侧和右侧)。
但是,发生的情况是滑块固定在左侧0px处。 1)无论如何我可以集中整个幻灯片容器吗? 2)根据窗口/浏览器的高度缩放幻灯片容器?
我确实参考了这个,但没有激发任何解决方案: Jssor滑块100%宽度
有人可以帮忙吗? 谢谢。
响应代码以适应高度或宽度
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
var windowWidth = $(window).width();
if (windowWidth) {
var windowHeight = $(window).height();
var originalWidth = jssor_slider1.$OriginalWidth();
var originalHeight = jssor_slider1.$OriginalHeight();
var scaleWidth = windowWidth;
if (originalWidth / windowWidth > originalHeight / windowHeight) {
scaleWidth = Math.ceil(windowHeight / originalHeight * originalWidth);
}
jssor_slider1.$ScaleWidth(scaleWidth);
}
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
重新1:这是一个自动居中的技巧,
<div style="position: relative; width: 100%; overflow: hidden;">
<div style="position: relative; left: 50%; width: 5000px; text-align: center; margin-left: -2500px;">
<!-- use 'margin: 0 auto;' to auto center element in parent container -->
<div u="slider1_container" style="...margin: 0 auto;..." ...>
</div>
</div>
</div>
问题2:您可以将滑块缩放到任何大小,使用api调用'jssor_slider1。$ ScaleWidth(width)'作为jssor滑块始终保持宽高比,使滑块适合窗口高度,可以检测窗口高度,然后计算宽度。
一般情况:“margin:auto”是您将大多数HTML元素水平居中的朋友。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.