Ajax added slides flash above current slide #1023

Closed
ghost opened this Issue Feb 19, 2014 · 0 comments

Comments

Projects
None yet
1 participant
@ghost

ghost commented Feb 19, 2014

When loading slides via Ajax, the loaded slide briefly flickers above the current slide. I've pinpointed the cause to lines 875 and 876 (shown below).

methods.uniqueID( slider.slides.first().clone().addClass('clone').attr('aria-hidden', 'true') ).appendTo( slider.container );
methods.uniqueID( slider.slides.last().clone().addClass('clone').attr('aria-hidden', 'true') ).prependTo( slider.container );

It may be relevant that I'm using CSS background images rather than inline content. All attempts to fix this have been unsuccessful.

HTML structure is:

  • JavaScript that initializes Flexslider is:

    $(window).load(function () {
    $('.flexslider').flexslider({
    animation: "slide",
    slideshow: false,
    touch: true,
    useCSS: false,
    start: function (slider) {
    $('body').removeClass('loading');
    $.makeAjaxRequest(slider);
    },
    after: function (slider) {
    // Creating the slider - definition shown below
    $.makeAjaxRequest(slider);
    },
    before: function () {
    $('.details').removeClass('shown');
    }
    });

    $.makeAjaxRequest = function (slider) {
    if (!!window.next_link) {
    if (!window.currentlyAwaitingAjaxResponse) {
    window.currentlyAwaitingAjaxResponse = true;
    $.ajax({
    url: window.next_link
    }).done(function (data) {
    li = $.prepareSlideFromJSON(data);
    $('.slides').append(li);
    slider.addSlide(li);
    window.currentlyAwaitingAjaxResponse = false;
    });
    }
    }
    }

    @jeffikus jeffikus closed this Apr 1, 2015

    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment