addSlide + ajax causing major UI issues

[drywall]

Working on a development site that's loading blog posts via AJAX ( see http://cornershop.bbyrne.cshp.co/#p=blog ).

Unfortunately the addSlide calls seem to be having a terrible effect on the slider's behavior: it starts flickering and stuttering as I try to scrub through the items. Eventually it seems to also get "stuck" to my cursor such that even when I'm not mouseDown-ing the slider follows the x position of my mouse.

Happening consistently in latest versions of Chrome and Safari.

Here's some relevant code from the aforementioned URL:

  $('.slider-wrapper').iosSlider({
    desktopClickDrag: true,
    responsiveSlides: false,
    responsiveSlideContainer: true,
    snapToChildren: true,
  });

and

  function grabNewPost() {
    var count = $("#blog article").length;
    if (count >= 40) grabMore = false;
    var data = { action: 'cshop_post', offset: count }
    var call = $.post(cshop.ajaxurl, data, function(response) {
      if (response.error) {
        grabMore = false;
      } else {
        post_html = htemplate(response);
        $('.slider-wrapper').iosSlider('addSlide', post_html, count + 1 );
      }
    });
    return call;
  }

[marcwhitbread]

@drywall What is happening is that the slider is recalibrating while moving, and this is screwing up a number of things. Event binding problems, animations are stacking and causing flickering. I recommend doing the following...

$('.slider-wrapper').iosSlider({
    desktopClickDrag: true,
    responsiveSlides: false,
    responsiveSlideContainer: true,
    snapToChildren: true,
    onSlideComplete: recalibrate_slider
});

var recalibrate_slider = function(args) {

    //check and recalibrate new items
    $('.slider-wrapper').iosSlider('update');

}

and for the ajax call, use jQuery.append() in stead of the addSlide method. That way you can control the recalibration onSlideComplete.

[drywall]

That worked beautifully... guess I just over-estimated the use cases for the addSlide method. Thanks.