I'm trying to legit 2 JCarousel carousels that I call ajax'om when I click on the portfolio block.
Both carousels work, but there is no connection, I would like to know why?

Calling code carousel:

(function($) { var connector = function(itemNavigation, carouselStage) { return carouselStage.jcarousel('items').eq(itemNavigation.index()); }; $(function() { var carouselStage = $('.carousel-stage').jcarousel(); var carouselNavigation = $('.carousel-navigation').jcarousel(); carouselNavigation.jcarousel('items').each(function() { var item = $(this); var target = connector(item, carouselStage); item .on('jcarouselcontrol:active', function() { carouselNavigation.jcarousel('scrollIntoView', this); item.addClass('active'); }) .on('jcarouselcontrol:inactive', function() { item.removeClass('active'); }) .jcarouselControl({ target: target, carousel: carouselStage }); }); // Setup controls for the stage carousel $('.prev-stage') .on('jcarouselcontrol:inactive', function() { $(this).addClass('inactive'); }) .on('jcarouselcontrol:active', function() { $(this).removeClass('inactive'); }) .jcarouselControl({ target: '-=1' }); $('.next-stage') .on('jcarouselcontrol:inactive', function() { $(this).addClass('inactive'); }) .on('jcarouselcontrol:active', function() { $(this).removeClass('inactive'); }) .jcarouselControl({ target: '+=1' }); // Setup controls for the navigation carousel $('.prev-navigation') .on('jcarouselcontrol:inactive', function() { $(this).addClass('inactive'); }) .on('jcarouselcontrol:active', function() { $(this).removeClass('inactive'); }) .jcarouselControl({ target: '-=1' }); $('.next-navigation') .on('jcarouselcontrol:inactive', function() { $(this).addClass('inactive'); }) .on('jcarouselcontrol:active', function() { $(this).removeClass('inactive'); }) .jcarouselControl({ target: '+=1' }); }); })(jQuery);

Template:

 <div id="hide_carousel_holder" class="hide_carousel_holder"> <span id="close_span" class="close_span">X</span> <div class="connected-carousels"> <div class="stage"> <div class="carousel carousel-stage" id="carousel-stage"> <ul id="result"> </ul> </div> <a href="#" class="prev prev-stage" data-jcarouselcontrol="true"><span>‹</span></a> <a href="#" class="next next-stage" data-jcarouselcontrol="true"><span>›</span></a> </div> <div class="navigation"> <div class="carousel carousel-navigation" id="carousel-navigation"> <ul id="result1"> </ul> </div> <a href="#" class="prev prev-navigation">‹</a> <a href="#" class="next next-navigation">›</a> </div> </div> </div>

Can anyone come across this? I will be glad to any help, thanks!

1 answer 1

In general, can someone come in handy. I solved the problem by transferring the connection declaration at the time of transferring values ​​from ajax to html, namely:

 $(".ajax_link").click(function(event){ console.log('click') target = this; $.ajax({ type:"POST", url:"/index-ajax.php", data:{ q:"assets/snippets/getContent/getContent.php", id: $(this).attr('data-id') }, success:function(response) { $("#result").html(response); $("#result1").html(response); $('#carousel-stage').jcarousel('reload'); $('#carousel-navigation').jcarousel('reload'); var connector = function(itemNavigation, carouselStage) { return carouselStage.jcarousel('items').eq(itemNavigation.index()); }; $(function() { var carouselStage= $('.carousel-stage').jcarousel(); var carouselNavigation = $('.carousel-navigation').jcarousel(); carouselNavigation.jcarousel('items').each(function() { var item = $(this); var target = connector(item, carouselStage); item .on('jcarouselcontrol:active', function() { carouselNavigation.jcarousel('scrollIntoView', this); item.addClass('active'); }) .on('jcarouselcontrol:inactive', function() { item.removeClass('active'); }) .jcarouselControl({ target: target, carousel: carouselStage }); }); }); } }); });

After that, everything worked