i am trying to create a product carousel in PW from last few days but can't figure out what i am doing wrong. here is HTML of carousel which is working fine.
<div class="box producttabs">
<div class="tab-nav">
<ul id="producttabs304244223" class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab-latest304244223">First Tab</a></li>
<li><a data-toggle="tab" href="#tab-featured304244223">Second Tab</a></li>
</ul>
</div>
<div class="tab-content">
<div id="tab-latest304244223" class="tab-pane box-products tabcarousel304244223 slide active">
<div class="">
<a data-slide="prev" href="#tab-latest304244223" class="carousel-control left">‹</a>
<a data-slide="next" href="#tab-latest304244223" class="carousel-control right">›</a>
</div>
<div class="carousel-inner ">
<!-- repeat -->
<div class="item active">
<div class="row-fluid box-product">
<div class="span3 product-block"><div class="product-inner">
<div class="image">
<a href="#"><img alt="Loves or pursues" src="products/image-4.jpg"></a>
</div>
<div class="wrap-infor">
<div class="name"><a href="#">Loves or pursues</a></div>
<div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div>
</div>
</div>
</div>
<div class="span3 product-block"><div class="product-inner">
<div class="image">
<a href="#"><img alt="Loves or pursues" src="products/image-5.jpg"></a>
</div>
<div class="wrap-infor">
<div class="name"><a href="#">Loves or pursues</a></div>
<div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div>
</div>
</div>
</div>
<div class="span3 product-block"><div class="product-inner">
<div class="image">
<a href="#"><img alt="Loves or pursues" src="products/image-6.jpg"></a>
</div>
<div class="wrap-infor">
<div class="name"><a href="#">Loves or pursues</a></div>
<div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div>
</div>
</div>
</div>
<div class="span3 product-block"><div class="product-inner">
<div class="image">
<a href="#"><img alt="Loves or pursues" src="products/image-7.jpg"></a>
</div>
<div class="wrap-infor">
<div class="name"><a href="#">Loves or pursues</a></div>
<div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div>
</div>
</div>
</div>
</div>
</div>
<!-- repeat -->
</div>
</div>
<!-- end of tab -->
<div id="tab-featured304244223" class="tab-pane box-products tabcarousel304244223 slide">
<div class="">
<a data-slide="prev" href="#tab-featured304244223" class="carousel-control left">‹</a>
<a data-slide="next" href="#tab-featured304244223" class="carousel-control right">›</a>
</div>
<div class="carousel-inner ">
<div class="item active">
<div class="row-fluid box-product">
<div class="span3 product-block"><div class="product-inner">
<div class="image">
<a href="#"><img alt="Loves or pursues" src="products/image-8.jpg"></a>
</div>
<div class="wrap-infor">
<div class="name"><a href="#">Loves or pursues</a></div>
<div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div>
</div>
</div>
</div>
<div class="span3 product-block"><div class="product-inner">
<div class="image">
<a href="#"><img alt="Loves or pursues" src="products/image-1.jpg"></a>
</div>
<div class="wrap-infor">
<div class="name"><a href="#">Loves or pursues</a></div>
<div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div>
</div>
</div>
</div>
<div class="span3 product-block"><div class="product-inner">
<div class="image">
<a href="#"><img alt="Loves or pursues" src="products/image-2.jpg"></a>
</div>
<div class="wrap-infor">
<div class="name"><a href="#">Loves or pursues</a></div>
<div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div>
</div>
</div>
</div>
<div class="span3 product-block"><div class="product-inner">
<div class="image">
<a href="#"><img alt="Loves or pursues" src="products/image-3.jpg"></a>
</div>
<div class="wrap-infor">
<div class="name"><a href="#">Loves or pursues</a></div>
<div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div>
</div>
</div>
</div>
</div>
</div>
<div class="item ">
<div class="row-fluid box-product">
<div class="span3 product-block"><div class="product-inner">
<div class="image">
<a href="#"><img alt="Loves or pursues" src="products/image-5.jpg"></a>
</div>
<div class="wrap-infor">
<div class="name"><a href="#">Loves or pursues</a></div>
<div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div>
</div>
</div>
</div>
<div class="span3 product-block"><div class="product-inner">
<div class="image">
<a href="#"><img alt="Loves or pursues" src="products/image-6.jpg"></a>
</div>
<div class="wrap-infor">
<div class="name"><a href="#">Loves or pursues</a></div>
<div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div>
</div>
</div>
</div>
<div class="span3 product-block"><div class="product-inner">
<div class="image">
<a href="#"><img alt="Loves or pursues" src="products/image-7.jpg"></a>
</div>
<div class="wrap-infor">
<div class="name"><a href="#">Loves or pursues</a></div>
<div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div>
</div>
</div>
</div>
<div class="span3 product-block"><div class="product-inner">
<div class="image">
<a href="#"><img alt="Loves or pursues" src="products/image-8.jpg"></a>
</div>
<div class="wrap-infor">
<div class="name"><a href="#">Loves or pursues</a></div>
<div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
if you see in above HTML code there is two tabs and product carousel. one thing important is each 4 items are inclose in
<div class="item">
and first div of tab will be
<div class="item active">
i am using bellow code in PW but output is coming wrong and page disturb
<div class="tab-content">
<div id="tab-latest304244223" class="tab-pane box-products tabcarousel304244223 slide active">
<?php
$children=$pages->find("template=product,product_cat=1014,show_main>0");
if($children->getTotal() >0){
?>
<div class="">
<a data-slide="prev" href="#tab-latest304244223" class="carousel-control left">‹</a>
<a data-slide="next" href="#tab-latest304244223" class="carousel-control right">›</a>
</div>
<div class="carousel-inner ">
<?php
$j=1;
$active="active";
foreach($children as $child)
{
if($j==1)
{
echo "<div class=\"item $active\"><div class=\"row-fluid box-product\">";
$active="";
}
?>
<div class="span3 product-block"><div class="product-inner">
<div class="image">
<a href="#"><img alt="Loves or pursues" src="products/image-4.jpg"></a>
</div>
<div class="wrap-infor">
<div class="name"><a href="#">Loves or pursues</a></div>
<div class="description">Samsung Galaxy Tab 10.1, is the world's thinnest tablet, m...</div>
</div>
</div>
</div>
<?php
if($j==5){ echo "</div></div>"; $j=1; }
?>
<?php
$j++;
}
echo "</div></div>";
}
?>
</div>
</div>
</div>
if you see in my code i am using variable $j to count number of products and when product reach 5 i end the two div and make $j to 1 to create another <div class="item"> but active is only once. i am also trying to close two more div at end.
thanks for heloping