I'm making a responsive theme for WordPress built on Twitter Bootstrap. I'm using the FlexSlider slideshow jquery plugin on the homepage.
Unfortunately, when I resize my browser, FlexSlider doesn't resize gracefully. When I go narrower, the image is liable to get cropped off.. if I go wider, part of the next image can appear to the side. This happens even when I use the demo code from the FlexSlider website. It even happens on the FlexSlider demo. But Dany Duchaine's [Energized theme][3] manages to resize FlexSlider nicely as the viewport changes. Can anyone explain how he's doing it, or suggest any way I can improve the behaviour of my version?
Thanks!
You probably have a solution or have moved on at this stage but I thought I'd point out this issue on github for visitors: https://github.com/woothemes/FlexSlider/issues/391 (note patbouche's answer). This solution worked for me. I put it in the after:
callback.
var slider1 = $('#slider1').data('flexslider');
slider1.resize();
I combined a couple of these solutions and also added a check to make sure the slider existed on the page first.
$(function() {
var resizeEnd;
$(window).on('resize', function() {
clearTimeout(resizeEnd);
resizeEnd = setTimeout(function() {
flexsliderResize();
}, 250);
});
});
function flexsliderResize(){
if ($('.flexslider').length > 0) {
$('.flexslider').data('flexslider').resize();
}
}
I had to bind the window resize event in order to get this working reliably. Since the FlexSlider before and after callbacks did not work for me:
$(window).bind('resize', function() {
setTimeout(function(){
var slider = $('#banner').data('flexslider');
slider.resize();
}, 1000);
});
I think it is better to put it into before callback:
$('.flexslider').flexslider({
// your settings
before: function(slider){
$('.flexslider').resize();
}
});
I've also tried many ways but none where really working... Then I did it manually, and it works now: Save the slider data before changed by flexslider, when window is resizing: destroy flexslider (https://stackoverflow.com/a/16334046/7334422) and delete node completely, manually add original slider node that was saved in data, add it again and initialize flexslider... because this is quite expensive I also added a resized method (https://stackoverflow.com/a/40534918/7334422), in order to not being executed while resizing... Yes it is some code and it's a bit hacky, but it's working :)
$.fn.resized = function (callback, timeout) {
$(this).resize(function () {
var $this = $(this);
if ($this.data('resizeTimeout')) {
clearTimeout($this.data('resizeTimeout'));
}
$this.data('resizeTimeout', setTimeout(callback, timeout));
});
};
function myFlexInit(slider){
slider.data("originalslider", slider.parent().html());
slider.flexslider({
animation: "slide",
//... your options here
});
}
$(".flexslider").each(function() {
myFlexInit($(this));
});
$(window).resized(function(){
$(".flexslider").each(function() {
$(this).removeData("flexslider");
parent = $(this).parent();
originalslider = $(this).data("originalslider");
$(this).remove();
parent.append(originalslider);
newslider = parent.children().first();
myFlexInit(newslider);
});
}, 200);
You better wrap your slider in an own unique container:
<div class="sliderparent">
<div class="flexslider">
<ul class="slides">
</ul>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With