CODEWITHSUNDEEP
jquerycssresponsive-designjquery-slider
galexy
galexy

Reputation: 343

How to make rhonoslider responsive

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/

Upvotes: 2

Views: 1469

Answers (2)

Hitesh Patel
Hitesh Patel

Reputation: 35

$(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 Format 

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

give fix width to the wrapper, fix height to slide and #slider. using media query... for mobile and ipad

if you want to use full screen slider just follow this:

$(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);
});
})

Upvotes: 0

Tymek
Tymek

Reputation: 3113

Hah. I had the same problem day ago. I reload website on every breakpoint. ;P

My code:

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

Used in here.

Upvotes: 3

Related Questions