Carousel not syncing with slider after dynamically adding slide

[jp-webdev]

Hello,

Note here that the image variable represents an image that was AJAXed into the page.

Upon adding a slide to the flexslider using $('#slider').data('flexslider').addSlide(image) and $('#carousel').data('flexslider').addSlide(image), the image is added to both the carousel and slider, but any click functionality of the image on the slider is not preserved. You can click any image in the carousel not added this way, and it will bring you to the corresponding image in the slider. Clicking any image in the carousel added using data('flexslider').addSlide() does nothing.

Here is a JSfiddle that reproduces the issue -- although not for AJAX content, but the issue is the same. http://jsfiddle.net/XXzpW/5/

[banago]

@jp-webdev same here. Did you find a solution for this?

[jamesleeht]

Anyone figured out a fix or workaround for this yet?

[itzik182]

I have the same problem, Has anyone solved this?

[rushtohk]

To solve this issue, you have to code a bit. You can achieve this functionality by following below steps :

1. Add class to dynamic added li's(say dynamic-image) item of Carousel.
2. copy paste below code in your js file where you initialized the slider. $(document).on('click','.dynamic-image',function(){ var elementNum = 795*($(this).prevAll("li").length); $("#slider .slides").css("transform", "translate3d(-"+elementNum+"px, 0px, 0px)") });
3. In my case i have to multiply it by 795 you have to change it as per your requirement .

[jeffikus]

Hi there, I released 2.7.0 last week, please let me know if the issue persists after updating.