Flexslider items disappearing on resize

Question

I've set up a flexslider as a product carousel for a fluid width site. The product items disappear sometimes when the browser window is opened up to a certain width. Details below:

Dev Site / Demo

This is regarding the center box called "Popular Products." Here's how to replicate the issue I am experiencing, in all browsers that I have tested (FF, IE, Chrome, Safari)

1. Close your browser window down until only 4 or 5 items show
2. Click the right arrow until the last product is showing (currently it's the pro-mate black sleeves)
3. Now, resize your browser window wider, and the products disappear at a certain point. Go smaller again and they reappear.

Notes that may help:

• If you are NOT at the last item in the carousel and resize, it works fine and things stretch as needed

• If the browser is wide and the max 6 products are showing and you go to the last item in the carousel, then resize small and big again, it works fine as well (so it only breaks when you go to last item when carousel is small in width, then goes big)

• For the slider config, I have set a minItems of 4 and maxItems of 6.

• All of the demos for flexslider are images only...I haven't seen anyone using it to display html inside each item like I have, nor do I know if it was even designed to allow this. Hopefully if other people are also doing html/multi-items insde flexslider, this will be something they've seen, or this could help them if we solve it.

Thanks for any assistance

Answer 1

Lauren's fix is detailed and complete, (aside from the deprecated $.broswer) but I've found that simply resetting the the carousel to slide 0 on resize is simple and elegant for responsive designs. It's easy to focus on resize events when building the site because testing, but in the real world people aren't constantly resizing their browsers while looking at a page, and those that are are a very small edge case. So this is my solution:

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

Answer 2

This seems to work in the latest Chrome, Safari, Firefox, and IE, but it's messy (mostly because I got it working in Chrome, Safari, and Firefox, and then realized IE9 was still making elements disappear) :

/*
 * 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
*/