CODEWITHSUNDEEP
performanceflexslider
expansivelove
expansivelove

Reputation: 35

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

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!

Upvotes: 2

Views: 1648

Answers (3)

Julix
Julix

Reputation: 627

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'));.

Upvotes: 0

Rajitha
Rajitha

Reputation: 47

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"
          });
        });
      });
    });

Upvotes: 0

Malcr001
Malcr001

Reputation: 8289

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.

Upvotes: 2

Related Questions