Question

我使用Bootstrap 4框架的标准轮播。我想使用mysql数据库中的图像。问题是幻灯片无法播放。它将图像显示为静态图像，而不是幻灯片。这是网站链接：www.todays.com.pl/index-off.php。

这是轮播代码：

<div id="demo" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>
        <li data-target="#demo" data-slide-to="1"></li>
        <li data-target="#demo" data-slide-to="2"></li>  
    </ul>

    <!-- The slides -->               
    <div class="carousel-inner">

    <?php while ($row = mysql_fetch_array($result3)) {      
        $id =($row['id']);                      
        $image =($row['image']);
    ?>

    <?php echo('<div class="carousel-item bnw-filter active">'); ?>
        <?php 
            echo '<a href="artykul.php?id='.$id.'">'; 
            echo '<img src="uplimg/'.$image.'" class="img-fluid">';
            echo '</a>'; 
        ?>
    <?php echo('</div>'); ?>    

    <? } ?>               
    </div>

    <!-- Left and right controls -->
    <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
    </a>
</div>

我认为问题可能在此行中：

<?php echo('<div class="carousel-item bnw-filter active">'); ?>

最初，只有第一张幻灯片有一个“活动”类。所有其他人都没有此类。因此，如果我使用数据库中的图像来动态地对第一张幻灯片/图像进行分配，那么我不知道如何分配该类。

我确定有人曾经遇到过此问题。请帮忙。

Answer 1

您认为以下行是正确的：

<?php echo('<div class="carousel-item bnw-filter active">'); ?>

您只需要一个类别为“活动”的物品。为此，我们只需要检查一下是否已经将活动项添加到DOM即可：

<?php 
    $hasAddedActive = false;
    while ($row = mysql_fetch_array($result3)) {      
    $id =($row['id']);                      
    $image =($row['image']);
?>

<?php 
    $divClass = 'carousel-item bnw-filter';
    $divClass .= $hasAddedActive ? '' : ' active';
    $hasAddedActive = true;
    echo('<div class="'.$divClass.'">'); 
?>
    <?php 
        echo '<a href="artykul.php?id='.$id.'">'; 
        echo '<img src="uplimg/'.$image.'" class="img-fluid">';
        echo '</a>'; 
    ?>
<?php echo('</div>'); ?>    

<? } ?>

从MySQL数据库将图像加载到Bootstrap 4轮播中

1 个答案: