flexslider не загружается «& lt; div class =» flex-viewport «quot; style = & quot; переполнение: скрыто; положение: относительное; & gt; & quot;

Flexslider не работает должным образом, когда контент является динамическим. Я попробовал это для статических данных, это работало. Но это не сработало, когда контент динамический. Проблема в том, что он не загружается

<div class="flex-viewport" style="overflow: hidden; position: relative;">

. На самом деле, он загружается только для первого списка, он не загружается для остальных списков.
Мой код примерно такой:

<ul class="nav nav-tabs" role="tablist">
<?php
foreach ($cats as $k => $cat)
{
$cat = (object) $cat;
$id = strtolower(str_replace(' ', '-', $cat->category_name));
$name = ucfirst($cat->category_name);
?>
<li role="presentation" <?php echo $k == 0 ? 'class="active":' : NULL; ?>>
<a href="#<?php echo $id; ?>" role="tab" data-toggle="tab" id="<?php echo $id; ?>1"><?php echo $name; ?></a>
</li>
<?php } ?>
</ul>

<!-- Tab panes -->
<div class="tab-content">
<?php
foreach ($cats as $k => $cat)
{
$cat = (object) $cat;
$id = strtolower(str_replace(' ', '-', $cat->category_name));
$name = ucfirst($cat->category_name);

?>
<div role="tabpanel" class="tab-pane <?php echo $k == 0 ? 'active' : NULL; ?>" id="<?php echo $id; ?>">
<div id="carousel<?php echo (7 + $k); ?>" class="flexslider">

<ul class="slides">
<li>............
..........

Окончательный код после загрузки flexslider должен выглядеть так

<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="electronics">
<div id="carousel7" class="flexslider">
<div class="flex-viewport" style="overflow: hidden; position: relative;">
<ul class="slides" style="width: 2200%; -webkit-transition: 1s; transition: 1s; -webkit-transform: translate3d(0px, 0px, 0px);">
<li style="width: 195px; float: left; display: block;">
<li.......
</div>

<div role="tabpanel" class="tab-pane" id="food">
<div id="carousel8" class="flexslider">
<div class="flex-viewport" style="overflow: hidden; position: relative;">
<ul class="slides" style="width: 2200%; -webkit-transition: 1s; transition: 1s; -webkit-transform: translate3d(0px, 0px, 0px);">
<li style="width: 195px; float: left; display: block;">
<li.......
</div>

Но div с id carousel8 не загружал div с классом flex-viewport. Он загружается только для категории электроники.

Пожалуйста, помогите мне.
Заранее спасибо.