jquery - How to make rhonoslider responsive

Question

In my wordpress theme I have Rhinoslider jquery slider. Rhinoslider is working fine, but this slider is not responsive.Is anyone here have an idea that how to modify css or js to have my slider responsive. This slider is release under MIT and GPL2 License. API link of Rhinoslider: http://rhinoslider.com/api/create-your-own-effects/

Answer 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;
}

用在这里。

Answer 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 格式

<div class="wrapper"> 
<ul id="slider"> 
<li><div class="slide"></div></li> 
</ul> 
</div>

为包装器提供固定宽度，为滑动和#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-容器#slider li').height(getslidehi);
});
})