【发布时间】:2016-01-03 17:08:45
【问题描述】:
当您使 Jssor 滑块具有响应性并且它的元素放置在 Table 内时,响应性不再起作用。
<script>
jQuery(document).ready(function ($) {
var options = {};
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales
//while window resizing
function ScaleSlider() {
var parentWidth = $('#slider1_container').parent().width();
if (parentWidth) {
jssor_slider1.$ScaleWidth(parentWidth);
}
else
window.setTimeout(ScaleSlider, 30);
}
//Scale slider after document ready
ScaleSlider();
//Scale slider while window load/resize/orientationchange.
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
});
</script>
和html:
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px; overflow: hidden;">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">
<div><img u="image" src="image1.jpg" /></div>
<div><img u="image" src="image2.jpg" /></div>
</div>
<!-- Trigger -->
<script>jssor_slider1_starter('slider1_container');</script>
如果我将“slider1_container”放在表格中,响应将不再起作用。
我为 SharePoint 创建了一个滑块 web 部件,我无法控制“slider1_container”的父级,并且任何 html 元素都可能存在。
并且由于该表,这行代码永远不会返回小于滑块初始宽度的值:
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
这就是响应失败的原因,因为如果宽度没有变小,那么 $ScaleWidth 方法将不会缩放滑块。
【问题讨论】:
标签: jssor responsiveness