carousel从mysql获取数据后不显示卡片

nuypyhwy 于 2021-06-20 发布在 Mysql

关注(0)|答案(2)|浏览(259)

我需要一些帮助解决一个问题，我试图使一个卡转盘从我的mysql数据库获取数据，一切顺利，但卡显示在对方不喜欢它应该显示在一个转盘/滑块，有什么想法，我如何解决这个问题，以显示他们在一行？这是我的代码和图片：

<?php
      include_once 'includes/dbh.inc.php';
?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />

    <meta charset="utf-8">
    <title>carusel</title>
  </head>
  <body>

    <section class="container p-t-3">
        <div class="row">
            <div class="col-lg-12">
                <h1>Bootstrap 4 Card Slider</h1>
            </div>
        </div>
    </section>
    <section class="carousel slide" data-ride="carousel" id="postsCarousel">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 text-md-right lead">
                <a class="btn btn-outline-secondary prev" href="" title="go back"><i class="fa fa-lg fa-chevron-left"></i></a>
                <a class="btn btn-outline-secondary next" href="" title="more"><i class="fa fa-lg fa-chevron-right"></i></a>
            </div>
        </div>
    </div>
    <div class="container p-t-0 m-t-2 carousel-inner">
             <div class="row row-equal carousel-item active m-t-0">
                 <div class="col-md-4">
                <?php
                $sql = "SELECT * FROM users;";
                $results = mysqli_query($conn, $sql);
                $resultCheck = mysqli_num_rows($results);
                if ($resultCheck > 0){
                    while ($row = mysqli_fetch_assoc($results)) { ?>
                    <div class="card" style="width: 18rem;">
                        <div class="card-img-top">
                        <img class="img-fluid" src="<?php echo $row['avatar']; ?>" alt="Carousel">
                        </div>
                        <div class="card-body">
                        <h5 class="card-title"><?php echo $row['user_first'].' '.$row['user_last']; ?></h5>
                        <p><?php echo $row['card_text_profil']; ?></p>
                        <a href="<?php echo $row['profil_link']; ?>" class="btn btn-primary">Profil site</a>
                        </div>
                    </div>
                    <?php } ?>
                <?php } ?>
            </div>
        </div>
    </div>
  </section>

  </body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<script src="js/scripts.js"></script>
</html>

mysql php

来源：https://stackoverflow.com/questions/52002791/carousel-not-displaying-cards-right-after-getting-data-from-mysql

2条答案

按热度按时间

ifmq2ha21#

这个css文件怎么样？你把图片放到div上吗？

赞(0）回复(0）举报 2021-06-21

ff29svar2#

你要关2号门了 </div> 内部 while 循环，但它们在 while 循环，您需要将它们添加到 while 循环。
添加了一个条件来检查它是否是carousel中的第一个元素，如果是，则添加 active 根据文件要求分类。
需要初始活动元素。活动类需要添加到其中一张幻灯片中。否则，旋转木马将不可见。
我建议的代码作为一个答案，使它更具可读性，这使它更容易防止这种性质的问题。缩进在很大程度上帮助您清楚地看到块/循环的开始和结束位置。
在这里工作。
替换：

<div class="container p-t-0 m-t-2 carousel-inner">
         <div class="row row-equal carousel-item active m-t-0">
             <div class="col-md-4">
    <?php

      $sql = "SELECT * FROM users;";
      $results = mysqli_query($conn, $sql);
      $resultCheck = mysqli_num_rows($results);

      if ($resultCheck > 0){
        while ($row = mysqli_fetch_assoc($results)) {

          //echo '<tr><th scope="row">'.$row['user_id'].'</th><td>'.$row['user_last']."</td><td>".$row['user_uid']."</td></tr>";
          /*echo '<div class="card" style="width: 18rem;">';
          echo '<img class="card-img-top" src="'.$row['avatar'].'" alt="Card image cap">';
          echo '<div class="card-body">';
          echo '<h5 class="card-title">'.$row['user_first'].' '.$row['user_last'].'</h5>';
          echo '<p class="card-text">'.$row['card_text_profil'].'</p>';
          echo '<a href="'.$row['profil_link'].'" class="btn btn-primary">Profil site</a>';
          echo '</div>';
          echo '</div>';*/
          echo '<div class="card" style="width: 18rem;">';
          echo '<div class="card-img-top">';
          echo '<img class="img-fluid" src="'.$row['avatar'].'" alt="Carousel">';
          echo'</div>';
          echo '<div class="card-body">';
          echo '<h5 class="card-title">'.$row['user_first'].' '.$row['user_last'].'</h5>';
          echo '<p class="card-text">'.$row['card_text_profil'].'</p>';
          echo '<a href="'.$row['profil_link'].'" class="btn btn-primary">Profil site</a>';
          echo '</div>';
          echo '</div>';
          echo '</div>';
          echo '</div>';

        }
      }
    ?>

     </div>

使用：

<div class="container p-t-0 m-t-2 carousel-inner">
  <?php
  $sql = "SELECT * FROM users;";
  $i = 1;
  $results = mysqli_query($conn, $sql);
  $resultCheck = mysqli_num_rows($results);
  if ($resultCheck > 0){
    while ($row = mysqli_fetch_assoc($results)) { ?>
      <?php if($i % 2 != 0): //add new slider every odd row ?>
          <div class="row row-equal carousel-item <?php echo ($i == 1) ? "active" : ""; ?> m-t-0">
      <?php endif; ?>
        <div class="col-md-4">
          <div class="card" style="width: 18rem;">
            <div class="card-img-top">
              <img class="img-fluid" src="<?php echo $row['avatar']; ?>" alt="Carousel">
            </div>
            <div class="card-body">
              <h5 class="card-title"><?php echo $row['user_first'].' '.$row['user_last']; ?></h5>
              <p><?php echo $row['card_text_profil']; ?></p>
              <a href="<?php echo $row['profil_link']; ?>" class="btn btn-primary">Profil site</a>
            </div>
          </div>
        </div>
          <?php if($i % 2 != 0): //add new slider every odd row ?>
            </div>
          <?php endif; ?>
    <?php $i++; } ?>
  <?php } ?>
</div>

赞(0）回复(0）举报 2021-06-20

我来回答

carousel从mysql获取数据后不显示卡片

2条答案

相关问题

热门标签

最新问答