带 Bootstrap 轮播的 PHP

Question

我正在尝试学习 PHP 并将其与我网站的 Bootstrap 库一起使用。我希望使用所见的 Bootstrap 轮播 here

我想要实现的是带有标题的轮播，我在图片中显示的机器名称将是一个超链接，可以将您带到该页面以获取更多信息。我有一个 MySQL 数据库，其中包含机器名称和关于它所在位置的 ImagePath。

所以我目前的代码如下 -

<?php
                while($row = mysql_fetch_array($result))
                {
        ?>
      <div class="bs-example">
      <div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-captions" data-slide-to="1"></li>
          <li data-target="#carousel-example-captions" data-slide-to="2"></li>
        </ol>
          <img data-src="holder.js/900x800/auto/#777:#777" style="height: 400px; width: 400px;" alt="First slide image" src="<?php echo $row['MachineImagePath'] ?>"/>
     <div class="finlay-carousel-caption">
        <h3><?php echo $row['MachineName']?></h3>
          <div>
            <p>
             Click the link above for more details about <?php echo $row['MachineName']>
            </p>
          </div>
                <a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
      </div>
     </div>
      </div>
        <?php
                }
                mysql_close($connection);
        ?>

目前，不是将每个图像放在轮播中，而是为页面下方的每个图像创建一个新的轮播。如果 <carousel-example-captions> html 位于 while 循环之外，因此它被创建一次，然后当您单击下一个 > 和上一个 < 按钮时，img 标记将为每张幻灯片拾取新图像。

另请注意 - <h3><?php echo $row['MachineName']?></h3> - 我还没有将标题变成超链接，因为我想让轮播首先正常工作。

Answer 1

我最近添加了一个带有 mysql 数据库链接的轮播。问题是您在 while 语句中有创建新的轮播代码。如果你把它拿出来，只在里面放上新的幻灯片命令，它就会完美地工作。

    <div class="bs-example">
    <div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
<?php
    $counter = 1;
    while($row = mysql_fetch_array($result)){
?>
            <div class="item<?php if($counter <= 1){echo " active"; } ?>">
                <a href="">
                    <img data-src="holder.js/900x800/auto/#777:#777" style="height: 400px; width: 400px;" alt="First slide image" src="<?php echo $row['MachineImagePath'] ?>"/>
                </a>
                <div class="finlay-carousel-caption">
                    <h3><?php echo $row['MachineName']?></h3>
                    <p>Click the link above for more details about <?php echo $row['MachineName']>; ?></p>
                </div>
            </div>
<?php
    $counter++;
    }
    mysql_close($connection);
?>

        <ol class="carousel-indicators">
           <li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
           <li data-target="#carousel-example-captions" data-slide-to="1"></li>
           <li data-target="#carousel-example-captions" data-slide-to="2"></li>
        </ol>
    </div>
</div>

如果您从 mysql 语句中获取行数，您可以更改指标部分以具有允许无限数量的幻灯片的循环。