Я сохранил пользователя в базе данных mysqld с его профилем и другими деталями в каждой строке. Я настроил просмотр по крайней мере 6 изображений, которые автоматически прокручиваются по горизонтали. Я хотел бы установить бесконечный цикл таким образом, чтобы одновременно отображалось 6 изображений профиля пользователя, а затем непрерывно появлялись следующие 6 пользовательских изображений из mysql. Как я могу это сделать.
Здесь я только что вставил
<img class="img-fluid" src="<?php echo $row['Profile Image']; ?>" alt="">
во все шесть div, и он показывает мне изображение одного пользователя профиля во всех шести контейнерах, затем он автоматически создает следующую строку и показываетизображение другого пользователя во всех шести контейнерах и список идет вертикально. Как я могу исправить и достичь того, что я хочу? Заранее спасибо.
Мой код
<?php
include('conn.php');
$query=mysqli_query($conn,"select * from `home`");
while($row=mysqli_fetch_array($query)){
?>
<body>
<div class="container text-center">
<h1 class="font-weight-light mb-5">Bootstrap 4 Multi Item Carousel Example</h1>
<div class="row mx-auto my-auto">
<div id="myCarousel" class="carousel slide w-100" data-ride="carousel">
<div class="carousel-inner w-100" role="listbox">
<div class="carousel-item active">
<div class="col-lg-4 col-md-6">
<img class="img-fluid" src="<?php echo $row['Profile Image']; ?>" alt="">
</div>
</div>
<div class="carousel-item">
<div class="col-lg-4 col-md-6">
<img class="img-fluid" src="<?php echo $row['Profile Image']; ?>" alt="">
</div>
</div>
<div class="carousel-item">
<div class="col-lg-4 col-md-6">
<img class="img-fluid" src="<?php echo $row['Profile Image']; ?>" alt="">
</div>
</div>
<div class="carousel-item">
<div class="col-lg-4 col-md-6">
<img class="img-fluid" src="<?php echo $row['Profile Image']; ?>" alt="">
</div>
</div>
</div>
<a class="carousel-control-prev bg-dark w-auto" href="#myCarousel" 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 bg-dark w-auto" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<script>
try {
fetch(new Request("https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js", { method: 'HEAD', mode: 'no-cors' })).then(function(response) {
return true;
}).catch(function(e) {
var carbonScript = document.createElement("script");
carbonScript.src = "//cdn.carbonads.com/carbon.js?serve=CK7DKKQU&placement=wwwjqueryscriptnet";
carbonScript.id = "_carbonads_js";
document.getElementById("carbon-block").appendChild(carbonScript);
});
} catch (error) {
console.log(error);
}
</script>
<!--scripts loaded here-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="carousel.js"></script>
<script type="text/javascript">
</script>
</body>
<?php
}
?>