PHP 与 Bootstrap 轮播

问题描述 投票：0回答：5

我正在尝试学习 PHP 并将其与我的网站的 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 循环之外，那么它会创建一次，然后当您单击下一个 > 和上一个 < buttons.

时，img 标签将为每张幻灯片拾取新图像

另请注意 - 

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

php html twitter-bootstrap
5个回答
11
投票

我最近添加了一个带有 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 语句中获取行数，您可以更改指示器部分以具有允许无限数量的幻灯片的循环。

4
投票

我已经解决了这个问题，创建了一个像这样的控制变量：

  1. 定义控制变量：

    $active = true

  2. 创建循环

  3. 检查循环内部是否

    $active
    为真

  4. 循环结束后将控制变量设置为

    false

    <?php $active = true; ?>
    <?php foreach($images as $image):?>
      <div class="carousel-item <?php echo ($active == true)?"active":"" ?>"> 
        <img src="assets/img/anuncios/<?php echo $image['image'] ?>" class="d-block w-100" alt="...">
      </div>
    <?php $active = false; ?>
    <?php endforeach; ?>

这样，活动类仅在第一次循环时打印。

0
投票

我发现大多数轮播软件，即使是基于 JQuery 的，配置和维护都太复杂，这就是为什么我创建了自己的轮播，你可以在这里免费下载：https://33hops.com/php-html5-lightweight-幻灯片轮播.html

我编写此程序的前提简短而直接：我只是想要一些可以自动选择放入给定文件夹中的图像、预加载它们并循环浏览它们的东西，并具有漂亮的 HTML5 过渡效果和可选的覆盖在顶部的文本。结果是一个超轻的 PHP 轮播，占用空间极小，非常适合移动开发并且易于维护，只需更改图像并重新加载即可。

0
投票

  1. 这是普通文本。

  2. 这也是，但现在遵循一个代码块：

     Skip a line and indent eight spaces.
 That's four spaces for the list
 and four to trigger the code block.
-1
投票
<div id="carousel-example-generic" class="carousel slide clearfix" data-ride="carousel">
    <div class="carousel-inner">
        <?php
            $tmp_post = $post;
            $query_args = array( 'suppress_filters' => false, 'post_type' => 'post' );
            $slides = get_posts( $query_args );
            if ( ! empty( $slides ) ) {
            $counter = 0;
            foreach( $slides as $post ) { setup_postdata( $post ); $counter++;
        ?>  
        <div class="item<?php if ($counter == 1) echo ' active'; ?>">
            <?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($loop->ID) );?>
            <img src="<?php echo $feat_image ?>" class="img-responsive img-circle"/>
            <div class="finlay-carousel-caption">
            <?php $degisc= get_post_meta( $post->ID, '_my_meta_value_key', true );?>
            <h1><?php echo $degisc;?></h1>
            <?php $position = get_post_meta( $post->ID, '_my_meta_value_key1', true );?>
            <p><?php echo $position;?></p>
            <div class="line marginBottom15"></div>
                <?php $words = get_post_meta( $post->ID, '_my_meta_value_key2', true );?>
                <p><?php echo $words;?></p>
                <div class="line"></div>
            </div>
        </div>
        <?php } } 
        $post = $tmp_post;
        ?>
    </div>
</div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.