how can i fetch different data results in single row of bootstrap slider using php and mysql

Question

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--> 

Answer 1

Your loop creates a new "item" and three "col-md-4" for every product. You need to have only one "col-md-4", and implement a check to start a new "item" every third time.

It is not a very complex thing to do, but it can be tricky to position all your checks and opening and closing tags correctly inside and outside your loop. Always remember to close the last div when you exit the loop.

After our back and forth in the comments. This should work as your index.php file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" type="image/png" href="images/favicon.png">

    <title>Clickart</title>
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/stylesheet.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
    <link href="css/animated.css" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/bootstrap-dropdownhover.min.css" rel="stylesheet">


    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>
    <!---->

    <!---->
    <!--container ends here-->
      <div class="container-fluid"> 

        <!--upper row bar starts here-->

        <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;
                  $full_page = 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($full_page == 0){
                      if($check == 1){ ?>
                        <div class='row item active'>
                      <?php } else { ?>
                        </div><div class='row item'>
                      <?php }
                    } ?>
                      <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>
                  <?php
                    $full_page++;
                    if($full_page == 2) {
                      $full_page = 0;
                    }
                   } ?>
                </div>
              </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>

    <!--container ends here-->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
    <script src="js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="js/ie10-viewport-bug-workaround.js"></script>
    <script src="js/script.js"></script>
     <script src="js/bootstrap-dropdownhover.min.js"></script>


  </body>
</html>