AnythingSlider - 做扩展：true和resizeContents：false不能一起工作？

Question

我有一个移动网站的滑块，需要展开以适应将要查看的手机屏幕的宽度。我的问题是当我将手机纵向移动并翻转到横向时，滑块不会扩展以填充屏幕，尽管当我从较宽到较窄时它工作正常。或者，可以通过从较窄的浏览器宽度到更宽的浏览器宽度来模拟问题。

我在网上有两个例子。在示例1（http://www.trismi.com/so/index.html）中，我设置了expand:true, resizeContents: false，我得到了上述行为。在示例2（http://www.trismi.com/so/try2.html）中，我设置了expand:true并省略了resizeContents。滑块似乎调整大小，但问题是滑块的高度设置为0（我没有在我的CSS中设置它，因为面板是不同的高度），所以除了我的导航箭头之外没有任何显示。

我的设置有问题吗？我需要滑块的高度是动态的，因为我将有通过AJAX将内容加载到它们中的按钮。

以下是目前滑块的代码，如示例1中所述：

HTML：

    <div class="slider">
        <ul id="mobile-slider">
            <li>
                <div class="slide">
                    <img src="images/general.jpg" class="main"  />
                    <div class="slide-info">
                        <h2>SLIDE1</h2>
                        <div class="page-counter">x/x</div>
                    </div>
                    <img src="images/general.jpg" class="main" />
                    <img src="images/general.jpg" class="main" />

                </div>
           </li>
            <li>
                <div class="slide">
                    <img src="images/general.jpg" class="main"  />
                    <div class="slide-info">
                        <h2>SLIDE2</h2>
                        <div class="page-counter">1/10</div>
                    </div>
                </div>
           </li>
            <li>
                <div class="slide">
                    <img src="images/general.jpg" class="main"  />
                    <div class="slide-info">
                        <h2>SLIDE3</h2>
                        <div class="page-counter">1/10</div>
                    </div>
                </div>
           </li>
            <li>
                <div class="slide">
                    <img src="images/general.jpg" class="main"  />
                    <div class="slide-info">
                        <h2>SLIDE4</h2>
                        <div class="page-counter">1/10</div>
                    </div>
                </div>
           </li>
       </ul>
    </div>

这是javascript：

    var h = 120;
    function resetHeight()
    {
        if(  $('.slide-info').position().top  == 0 && $('.activePage .slide-info').position().top != 0)
        {
            h = parseInt($('.activePage .slide-info').position().top);
        }
        else if ( $('.slide-info').position().top != 0 )
        {
            h = parseInt($('.slide-info').position().top);  
        }
        h = parseInt(h * .4);
       $('.anythingSlider .arrow').css('top', h );
    }
    function makeSlider()
    {

        var ops = {
                   mode: "horizontal",
                   expand: true,
                   buildNavigation:false,
                   buildStartStop: false,
                   onInitialized: function()
                   {
                        var slideTemp = $('#mobile-slider').data('AnythingSlider');
                       $('.page-counter').text( slideTemp.currentPage + " / " + slideTemp.pages  );     

                   },
                   onSlideComplete: function()
                   {
                       //sets up the x of x pages count
                       var slideTemp = $('#mobile-slider').data('AnythingSlider');
                       $('.page-counter').text( slideTemp.currentPage + " / " + slideTemp.pages  );     

                   }
            };
        $('#mobile-slider').anythingSlider(ops);
    }
    $(document).ready(function(){
            makeSlider();  
            resetHeight();
    });