Dynamic Flipster CSS not rendering

Dynamic Flipster CSS not rendering

I am using flipster carousel card in my application. When i bind the card values statically my card view is coming fine . When i dynamically get the values carousal classes are not getting generated. i am just getting a plane and spread cards. When giving the data manually to the

  • tag , then the flipster is working fine. When passing the data dynamically to the
  • using AJAX then the Flipster is not showing up.

    Is it possible to create the flipster dynamically?


  • function getcard()

     {

     $.ajax({

     type : "GET",

     url : context2 + 'getCards?coreId='+coreId,

     contentType : "application/json",

     dataType: 'json',

     async : false,

     success: function(data) {

     var $cardList = $('#flipsterCard');

     var dem = document.getElementById("flipsterCard");

     var html = '';

     $.each(data, function(i, item) {

     $('<li  class="flipster__nav__item">')

     .append($('<a onclick="updatevariable(); " class="Button Block" style="background-color: red";>'))

     .append($('<p>').html(item.workspaceViewName))

     .append($('<p>').html(item.comments))

     //     html = "<li class='flipster__nav__item'> <a onclick='openNav()' class='Button Block' style='background-color: red;><div>view Name :"+item.workspaceViewName+" </div><div>Comments: "+item.comments+"</div></a></li>";

     $('<img />')

     .attr('src', "item.imgUrl")         // ADD IMAGE PROPERTIES.

     .width('113px').height('113px')

     //dem.innerHTML += html;                    

     .appendTo($cardList);

     });

     }

     });

     }