如何解决如何创建动态的Bootstrap Carousel以从MySQL获取幻灯片和文本?
总体而言,我仍然对逻辑和后端开发真的很失望。
我一直在开发CMS博客,现在我正尝试在首页上创建带有动态内容(图片+文字)的幻灯片。主要目标是使用它来宣布更新。
是否有一种方法可以使Carousel动态化,并使用我编写的代码来获取MySQL数据?
轮播
<header>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<?php
// The default SQL query
$sql = "SELECT * FROM posts ORDER BY id desc";
$stmt = $ConnectingDB->query($sql);
while ($DataRows = $stmt->fetch()) {
$Id = $DataRows["id"];
$PostTitle = $DataRows["title"];
$Image = $DataRows["image"];
$PostText = $DataRows["post"];
?>
<!-- Slide -->
<div class="carousel-item active" style="background-image: url('uploads/<?php echo $Image; ?>')">
<div class="carousel-caption">
<div class="card-body black">
<h3 class="large-mistral-white"><?php echo $PostTitle; ?></h3>
<p class="small-times-white"><?php echo $PostText; ?></p>
</div>
</div>
</div>
<?php } ?>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
数据库连接已包含在其中。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。