flexslider behaviour issue inside accordion

问题

I have a test page to better explain my problem. I have several items on a list (they're images on the test page); when I click on one of them, a corresponding slideshow, using flexslider, sldes down.

The problem is that, on page load, the slideshow shows all slides at once, at a much smaller size than intended. But then, if I switch the focus from the window (i.e. switch between browser tabs or move to another program and come back), the slideshow is now working and the slides are the proper size. This happens in mobile devices too.

When I check with firebug, there's an element.style rule applying to ul.slides:

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

Which hides one of the slides. Additionally, there's another rule for the list items inside ul.slides that gives them their initial width, which is not even the same for all sliders so I don't understand where it is coming from.

Can someone take a look and suggest a fix? I've tried overriding the element.style rule but so far unsuccessfully.

回答1:

I think I've figured it out, in principal at least...

.flexslider{display:none;} seems throw off the re-size function of Flexslider. You could just remove it, but that makes for some ugly loading.

To avoid said ugly loading I put together a quick, work-around- jsFiddle

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

There's a still a quick glitch while loading, but hopefully it will at least steer you in the right direction.

Another method I played with a bit was to try and force the re-size function like 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');
    });
});

This sort of solved the mini-picture issue, but was spotty at best.

来源：https://stackoverflow.com/questions/16429379/flexslider-behaviour-issue-inside-accordion

标签

jquery

flexslider