Geek Answers Handbook

Flexslider elements disappearing when resized

I installed flexslider as a product carousel for a fluid width site. Product elements sometimes disappear when the browser window opens to a certain width. Details below:

Dev Site / Demo

This applies to the central box called "Popular Products". Here's how to replicate the problem I'm experiencing in all the browsers I tested (FF, IE, Chrome, Safari)

  • Close the browser window until only 4 or 5 items are displayed.
  • Press the right arrow until the last product is displayed (currently these are black slip sleeves)
  • Now resize your browser window more widely and the products will disappear at some point. Go again, and they will appear again.

Notes that may help:

  • If you are NOT on the last element in the carousel and do not resize, it works great and things are stretched as needed

  • If the browser is wide and a maximum of 6 products are shown, and you go to the last element in the carousel, then resize and resize it, it works fine (so it breaks when you go to the last element, when the carousel is small in width, then goes large)

  • To configure the slider, I installed mini elements from 4 and maxItems from 6.

  • All demos for flexslider are just images ... I have not seen anyone use it to display html inside each element, like mine, and I don’t know if it was even designed for this. Hopefully if other people do html / multi-items insde flexslider too, it will be what they saw, or it can help them if we allow it.

Thanks for any help

+4
source share
2 answers

Lauren's fix is ​​detailed and complete, (except for the obsolete $ .broswer), but I found that just dropping the carousel onto slide 0 when resizing is simple and elegant for flexible designs. It is easy to focus on events with resizing when creating a site, because testing, but in the real world, people do not constantly resize their browsers when viewing a page, but those that are very small case. So this is my solution:

$(window).bind("resize", function(){ $('#flexslider').flexslider(0); });
+2
source

This seems to work in the latest browsers of Chrome, Safari, Firefox and IE, but it is messy (mainly because I worked in Chrome, Safari and Firefox, and then realized that IE9 is still erasing the elements):

 /* * Flexslider BUG FIX: * Summary: on window resize, ensure team scrollbar members are all visible * Dependency: Flexslider v2.1 and its dependencies */ $(window).bind("resize", function(){ //doesnt work well in IEs, so detect these browsers //var isIE9 = ($.browser.version == "9.0") && ($.browser.msie == true); var isIE = $.browser.msie == true; var tmpCurrentItem = $('#team').flexslider().data().flexslider.currentItem; // if current item isnt the 1st one, then resizing may mean that images will disappear if (tmpCurrentItem != 0) { // sometimes passing a number into flexslider doesn't work and returns nothing // in these instances, move to 0 //if NOT IE if (isIE != true) { var tmpFlexValue = $('#team').flexslider(tmpCurrentItem); if (tmpFlexValue == undefined) { $('#team').flexslider(0); } } var tmpCurrentSlide = $('#team').flexslider().data().flexslider.currentSlide; var tmpPages = $('#team').flexslider().data().flexslider.pagingCount; //if IE //slide number (not item number) should ALWAYS be less than paging Count //otherwise, it needs to be reset to 0 if (isIE == true){ if (tmpCurrentSlide >= tmpPages) { $('#team').flexslider(0); //this triggers another resize event } } } }); /* end flexslider bug fix */
+1
source

More articles:


All Articles