i want to create a dynamic bootstrap slider using php by fetching data from mysql. what the problem i am facing is i am getting all similar products in single row of slide. how can i get multiple data in single row of slide.i want to display different products in different columns of bootstrap.in this slider it contains two classes of js which are item and item active.i am getting same images on item and item active individually but as seperate slider those both are showing different images.i want to get all different data in different columns in all classes. ...FYR i had included my images
<div class="row msp" id="most-sold"><!--most sold product slider-->
<h3/>Most Sold out Products</h3>
<?php
$msp_query = "SELECT * FROM product WHERE cat_tag = 'mostsoldout' AND sales_completed > 0 ORDER BY sales_completed DESC";
$msp_run = mysqli_query($con,$msp_query);
if(mysqli_num_rows($msp_run)>0){
?>
<div id="carousel-example-generic2" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php
$check = 0;
while ($msp_row = mysqli_fetch_array($msp_run)) {
$pro_id = $msp_row['id'];
$pro_image = $msp_row['image1'];
$pro_desc = $msp_row['description'];
$pro_price = $msp_row['cost'];
$pro_rating = $msp_row['rating'];
$pro_title = $msp_row['title'];
$check = $check + 1;
if($check == 1){
echo "<div class='item active'>";
}else{
echo "<div class='item'>";
}
?>
<div class="row">
<div class="col-md-4">
<a href="#"><div class="panel">
<img src="images/<?php echo $pro_image;?>" class="img-responsive center-block" alt="item" >
<p><?php echo $pro_desc;?></p>
<p>Price:<span class="fa fa-rupee"><?php echo $pro_cost;?>/-</span></p>
<p>Rating: <span style="color:gold;" class="fa fa-star"></span><span style="color:gold;" class="fa fa-star"></span><span style="color:gold;" class="fa fa-star"></span><span style="color:gold;" class="fa fa-star"></span> </p>
<h5 style="color:#E80C4F;"><?php echo $pro_title?></h5>
</div></a>
</div>
<div class="col-md-4">
<a href="#"><div class="panel">
<img src="images/<?php echo $pro_image;?>" class="img-responsive center-block" alt="item" >
<p><?php echo $pro_desc;?></p>
<p>Price:<span class="fa fa-rupee"><?php echo $pro_cost;?>/-</span></p>
<p>Rating: <span style="color:gold;" class="fa fa-star"></span><span style="color:gold;" class="fa fa-star"></span><span style="color:gold;" class="fa fa-star"></span><span style="color:gold;" class="fa fa-star"></span> </p>
<h5 style="color:#E80C4F;"><?php echo $pro_title?></h5>
</div></a>
</div>
<div class="col-md-4">
<a href="#"><div class="panel">
<img src="images/<?php echo $pro_image;?>" class="img-responsive center-block" alt="item" >
<p><?php echo $pro_desc;?></p>
<p>Price:<span class="fa fa-rupee"><?php echo $pro_cost;?>/-</span></p>
<p>Rating: <span style="color:gold;" class="fa fa-star"></span><span style="color:gold;" class="fa fa-star"></span><span style="color:gold;" class="fa fa-star"></span><span style="color:gold;" class="fa fa-star"></span> </p>
<h5 style="color:#E80C4F;"><?php echo $pro_title?></h5>
</div></a>
</div>
</div>
</div>
<?php
}
?>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic2" role="button" data-slide="prev">
<span style="color:black"; class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic2" role="button" data-slide="next">
<span style="color:black"; class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<?php
}else{
echo "<center>No products yet</center>";
}
?>
</div><!--most sold product slider-->
</div>