Flexslider won't display correctly unless I adjust browser window size

Question

I have two Flexsliders both with thumbnail sliders inside two panels of a Spry Tabbed Panel. Upon page load, the slider/thumbnail pairs look crazy in Safari. The images are huge and cropped in the main slider; and in the thumbnail, the images are also huge, cropped, and layered on top of one another. However, if I resize my browser window, they instantly pop into the correct shape and size. In Chrome, Firefox, Opera, and IE the slider/thumbnail pairs look like two white lines, which also magically pop into the correct form when I resize the browser window. How can I fix this?

Here is a link to the webpage: http://jmoon.net/Projects/PhoenixRising/PhoenixRising_P1.html

The slider/thumbnail pairs are in the first two panels, "Commonwealth & Council" and "Transmission Gallery"

Thank you!

score 2 · Accepted Answer · answered Jun 17 '13 at 15:30

2

I had this issue and it's because your gallery is hidden on page load so the plugin cannot read the container width and height in order for it to render properly. Instead of initializing the plugin on page load initialize it when the user clicks on the tab. If you have any animation on the tab windows makes sure you initialise flexslider after the animation is complete.

answered Jun 17 '13 at 15:30

Malcr001

8,179
9
44
57

You are using spryTabbedPanels for your tabbed pages. I looked at the API and they dont seem to have an animation complete function so until you sort out that end you wont be able to fix it. You need a way to detect once the panel has shown so that you can initialize the carousel. – Malcr001 Jun 17 '13 at 21:14
Thank you for looking at it. Yeah, this is a bit beyond my experience and knowledge base so I'm going to have the Tweaky guy do it. Once it's fixed, I'll post the solution here in case others encounter a similar problem. I really appreciate you taking the time to look into my issue! – expansivelove Jun 17 '13 at 21:23
It seems the solution is to ditch the SpryTabbedPanel and use a javascript tabbed panel. – expansivelove Jun 18 '13 at 18:24

score 0 · Answer 2 · edited Jun 16 '16 at 12:16

This is the code what I use for this problem easily add click function that is all.

$( document ).ready(function() {
   $('.***-your class or id-***').click(function(){
        $(window).load(function() {

          // The slider being synced must be initialized first
          $('#carousel').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            itemWidth: 95,
            itemMargin: 5,
            asNavFor: '#slider'
          });

          $('#slider').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            sync: "#carousel"
          });
        });
      });
    });

score 0 · Answer 3 · answered Aug 01 '17 at 18:54

Another solution from here is to just use $(window).trigger('resize');

Make sure you call it when you need it (i.e. after the flexslider has been initialized).

Flexslider depends on jQuery anyways, but if you are interested, there is a non-jQuery version window.dispatchEvent(new Event('resize'));.

Flexslider won't display correctly unless I adjust browser window size

3 Answers3