PHP与Bootstrap Carousel [英] PHP with Bootstrap Carousel

问题描述

我正在尝试学习PHP，并将其与我的站点的Bootstrap库一起使用.我正在寻找使用引导轮播的方式，如此处

Im trying to learn PHP and using it with the Bootstrap library for my site. I am looking to use the bootstrap carousel as seen here

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

What I am trying to achieve is the carousel with captions and the Machine Name I am showing in the picture would be a hyperlink that will take you to that page for more info. I have a MySQL database that contains the machine name and the ImagePath as to where it is located.

所以我当前的代码如下-

So my code currently is as below -

<?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标签将为每个幻灯片获取新图像.<按钮.

Currently instead of placing each image inside the carosuel this is creating a new carousel for each image down the page. Should the <carousel-example-captions> html be outside the while loop so it is created once and then the img tag will pick up the new image for each slide as you click the next > and prev < buttons.

还请注意-< h3><?php echo $ row ['MachineName']?></h3> -我尚未将标头转换为超链接希望首先使轮播正常工作.

Note also - <h3><?php echo $row['MachineName']?></h3> - I have not yet turned the header into a hyperlink as I wanted to get the carousel working correctly first.

推荐答案

我最近添加了一个带有mysql数据库链接的轮播.问题是您在while语句中创建了新的轮播代码.如果您将它取出来，而只是将新的幻灯片命令放入其中，它将很完美.

I recently added a carousel with a link from the mysql database. The issue is that you have the create new carousel code inside of the while statement. If you take it out and just have the new slide commands inside the while it will work perfect.

    <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语句中获得了行数，则可以更改指标部分，使其具有一个循环，以允许无限数量的幻灯片.

If you get the number of rows from you mysql statement you can change the indicators section to have a loop that would allow for unlimited number of slides.

这篇关于PHP与Bootstrap Carousel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！