PHP与Bootstrap轮播图

Question

PHP与Bootstrap轮播图

3

我正在学习PHP，并结合Bootstrap库为我的网站使用它。我想使用Bootstrap走马灯，如此处所示。

我想要实现的是带标题的走马灯，我在图片中展示的“机器名称”将是一个超链接，点击后可跳转到该页面以获取更多信息。我有一个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> - 我还没有将标题转换为超链接，因为我想先正确地让轮播工作。

- Ctrl_Alt_Defeat

如果Bootstrap知道95％的开发者想要做这件事，他们会在文档中加入它... - Glen

4个回答

4

我通过创建以下控制变量解决了此问题：

定义一个控制变量：$active = true
创建一个循环
在循环内检查 $active 是否为true
循环结束后将控制变量设置为 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; ?>

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

- Filipe Petter

0

我发现大多数旋转木马软件，即使是基于JQuery的，都太复杂了，难以配置和维护，这就是为什么我创建了自己的旋转木马，您可以在此免费下载：https://33hops.com/php-html5-lightweight-slideshow-carousel.html

我编写这个程序的前提很简单明了：我只想要一个能够自动选择给定文件夹中放置的图像、预加载它们并通过漂亮的HTML5过渡效果循环播放它们的东西，并且可以选择在顶部覆盖文本。结果是一个超轻量级的PHP旋转木马，占用极低，非常适合移动开发和易于维护，只需更改图像并重新加载即可。

- Daniel J.

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

- sowmya munagala sita

我猜这是一个WordPress选项。 - Glen

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dagger2002 · Accepted Answer

我最近在mysql数据库中添加了一个带有链接的轮播图。问题在于您将创建新轮播图的代码放在了while语句内部。如果您将其移出并仅在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语句中获取行数，您可以更改指示器部分，以便具有允许无限幻灯片数量的循环。