如何使 rhonoslider 响应答案

【问题标题】：How to make rhonoslider responsive如何使 rhonoslider 响应
【发布时间】：2012-12-11 22:53:29
【问题描述】：

在我的 wordpress 主题中，我有 Rhinoslider jquery 滑块。 Rhinoslider 工作正常，但是这个滑块没有响应。这里有没有人知道如何修改 css 或 js 以使我的滑块响应。这个滑块是在 MIT 和 GPL2 许可下发布的。 Rhinoslider API 链接：http://rhinoslider.com/api/create-your-own-effects/

【问题讨论】：

标签： jquery css responsive-design jquery-slider

【解决方案1】：

哈。前一天我也遇到了同样的问题。我在每个断点上重新加载网站。 ;P

我的代码：

function responsivecheck(size){
    var compare = $("#wrap").width();
    if(size != compare){
        reload();
    } else {
        setTimeout(
            function(){responsivecheck(compare)}, 
            5000
        );
    }
} // ! executed after rhinoslider initialization !

function reload() {
    window.location.href = window.location.href;
}

使用in here。

【讨论】：

【解决方案2】：

$(document).ready(function(){
$(window).resize(function(){
var getslidewd= $('.wrapper').width();
var getslidehi= $('.slide').height();
$('.rhino-container').width(getslidewd);
$('.rhino-container').height(getslidehi);
$('.rhino-container #slider li').width(getslidewd);
$('.rhino-container #slider li').height(getslidehi);
});
})

HTML格式

为包装器提供固定宽度，为滑动和#slider 固定高度。使用媒体查询...用于移动设备和 ipad

如果您想使用全屏滑块，请按照以下步骤操作：

$(document).ready(function(){
$(window).resize(function(){
var getslidewd= $(window).width();
var getslidehi= $(window).height();
$('.rhino-container').width(getslidewd);
$('.rhino-container').height(getslidehi);
$('.rhino-container #slider li').width(getslidewd);
$('.rhino-container #slider li').height(getslidehi);
});
})

【讨论】：

请描述您提出的解决方案如何解决问题，并尝试正确缩进代码以提高可读性。
使用媒体查询为包装器提供固定宽度并固定高度以滑动...适用于移动设备和 ipad