duanpuchen3142 2017-08-05 04:35
浏览 55
已采纳

如何使用php和mysql在单行引导滑块中获取不同的数据结果

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

enter image description here

</div>
  • 写回答

1条回答 默认 最新

  • dongxiang3648 2017-08-05 06:33
    关注

    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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题