Flexslider не будет отображаться правильно, если я не изменю размер окна браузера

У меня есть два Flexslider, оба с ползунками миниатюр внутри двух панелей Spry Tabbed Panel. При загрузке страницы пары слайдер/миниатюра в Safari выглядят безумно. Изображения огромные и обрезаны в главном слайдере; а на миниатюре изображения тоже огромные, обрезанные и наложенные друг на друга. Однако, если я изменю размер окна браузера, они мгновенно приобретут правильную форму и размер. В Chrome, Firefox, Opera и IE пары слайдер/миниатюра выглядят как две белые линии, которые также волшебным образом принимают правильную форму, когда я изменяю размер окна браузера. Как я могу это исправить?

Вот ссылка на веб-страницу: http://jmoon.net/Projects/PhoenixRising/PhoenixRising_P1.html

Пары слайдер/миниатюра находятся на первых двух панелях: «Содружество и Совет» и «Галерея передач».

Благодарю вас!


performance flexslider
person expansivelove    schedule 10.06.2013    source источник

Ответы (3)


arrow_upward
2
arrow_downward

У меня была эта проблема, потому что ваша галерея скрыта при загрузке страницы, поэтому плагин не может прочитать ширину и высоту контейнера, чтобы он отображался правильно. Вместо того, чтобы инициализировать плагин при загрузке страницы, инициализируйте его, когда пользователь нажимает на вкладку. Если у вас есть анимация на окнах вкладок, убедитесь, что вы инициализируете flexslider после завершения анимации.

person Malcr001    schedule 17.06.2013
comment
Вы используете spryTabbedPanels для своих страниц с вкладками. Я посмотрел на API, и у них, похоже, нет функции полной анимации, поэтому, пока вы не разберетесь с этим, вы не сможете это исправить. Вам нужен способ определить, как только панель будет показана, чтобы вы могли инициализировать карусель. - person Malcr001; 18.06.2013
comment
Спасибо, что посмотрели. Да, это немного выходит за рамки моего опыта и знаний, поэтому я поручу это парню из Твики. Как только это будет исправлено, я опубликую решение здесь, если другие столкнутся с подобной проблемой. Я очень ценю, что вы нашли время, чтобы изучить мою проблему! - person expansivelove; 18.06.2013
comment
Кажется, решение состоит в том, чтобы отказаться от SpryTabbedPanel и использовать панель с вкладками javascript. - person expansivelove; 18.06.2013

arrow_upward
0
arrow_downward

Это код, который я использую для этой проблемы, легко добавляю функцию щелчка, вот и все.

$( 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"
          });
        });
      });
    });
person Rajitha    schedule 16.06.2016

arrow_upward
0
arrow_downward

Другое решение из здесь — просто использовать $(window).trigger('resize');

Убедитесь, что вы вызываете его, когда вам это нужно (например, после инициализации flexslider).

Flexslider в любом случае зависит от jQuery, но если вам интересно, существует не-jQuery версия window.dispatchEvent(new Event('resize'));.

person Julix    schedule 01.08.2017