проблема с гибким движением внутри аккордеона

Question

У меня есть test page, чтобы лучше объяснить мою проблему. У меня есть несколько элементов в списке (это изображения на тестовой странице); когда я нажимаю на один из них, соответствующее слайд-шоу, использующее flexslider, закрывается.

Проблема заключается в том, что при загрузке страницы слайд-шоу показывает все слайды сразу, при гораздо меньшем размере, чем предполагалось. Но тогда, если я переключу фокус из окна (т. Е. Переключитесь между вкладками браузера или перейдем к другой программе и вернусь), слайд-шоу теперь работает, а слайды - нужного размера. Это происходит и на мобильных устройствах.

Когда я проверяю с поджигатель, есть element.style правило применения к ul.slides:

transform: translate3d(-89px, 0px, 0px); 

Что скрывает один из слайдов. Кроме того, есть еще одно правило для элементов списка внутри ul.slides, которое дает им их начальную ширину, что для всех ползунков не одинаково, поэтому я не понимаю, откуда она.

Может кто-нибудь взглянуть и предложить исправить? Я пробовал переопределить правило element.style, но пока безуспешно.

Answer 1

Я думаю, что я понял это, в принципе, по крайней мере ...

.flexslider{display:none;} кажется скидывать функцию повторно по размерам FlexSlider. Вы можете просто удалить его, но это вызывает некоторую уродливую загрузку.

Чтобы избежать сказал некрасиво загрузки я соединял быстрый, работа-вокруг- jsFiddle

$(document).ready(function(){ 
    $(".flexslider").css('display','block').slideUp(); 
}); 

Там есть еще быстрый сбой при загрузке, но, надеюсь, это будет по крайней мере направить вас в правильном направлении ,

---

Другой метод, который я играл немного было попытаться заставить функцию повторного размера, как SO-

$(".client").click(function() { 
    $('.flexslider').resize(); // Problematic but promising 
    var project = this.id; 
    var project_id = '#' + project + '-project'; 
    var elem = $(".flexslider:visible").length ? $(".flexslider:visible"): $(".flexslider:first"); 
    elem.slideUp('slow', function() { 
     $(project_id).slideDown('slow'); 
    }); 
}); 

такого рода решается вопрос мини-картинка, но была пятнистой в лучшем случае.