Jump to content

Archived

This topic is now archived and is closed to further replies.

MrFent

Responsive issues with Revolution Slider

Recommended Posts

MrFent

On my home page of http://www.culturedfoodlife.com I have a few sliders built using the Revolution Slider. One is in the main column and is a picture of a Torte recipe, and the other is a picture of a book in the sidebar. When the page first loads, the sliders should be at 100% width inside their containers, but as you can see on both sliders, they are not. There is a gap on the right side. Only when you resize the browser window do the slides recalculate and go to 100% width. 

http://www.screencast.com/t/IvG8410pa

Any ideas why these slides don't go to 100% width on initial page load without having to resize the browser window?

Share this post


Link to post
Share on other sites
MrFent

Actually, I figured out a work around. It seems what is happening is that the slider is loading before the PL5 containers are finished loading, so the slider doesn't know how big it should be. I tried doing this:

 

<script>
jQuery(document).ready(function() {

   jQuery(window).trigger("resize");

});
</script>

 

But that still didn't work. Then I tried adding a delay to the resize event, and that fixed it:

 

<script>
jQuery(document).ready(function() {

   setTimeout(function() {
      jQuery(window).trigger("resize");

   }, 500);
});
</script>

I don't know if this is the most efficient method, but it works for me. What would be ideal would be for PL5 to automatically trigger the window resize event once all of the containers are loaded (without me having to add my own custom script)

Share this post


Link to post
Share on other sites

×