【问题标题】:Jssor slider responsiveness not working when placed inside a table放置在表格中时,Jssor 滑块响应不起作用
【发布时间】: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


    【解决方案1】:

    由于我正在为 SharePoint 创建一个滑块 Web 部件,因此我通过查找另一个作为导致问题的表的父级的 Div 元素解决了这个问题。
    在这一行中,我设置了我的救世主 div 元素的元素 ID,例如:

    var parentWidth = $('#savior_parent').width();
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多