カルーセルの中のカードを1枚ずつスライド

前提・実現したいこと

1つ目
・カルーセルの中のカードを1枚ずつスライドさせたい
--イメージ--
|1|2| 3 4 5
↓
|2|3| 4 5 1
のようにしたい
現在のコードだと
|1|2| 3 4 5
↓
|3|4| 5 1 2
となってしまう


<?php require 'menu.php';?>
<?php
$pdo=new PDO('mysql:host=localhost;dbname=kaihatsu;charset=utf8','staff','password');
$sql=$pdo -> query('select * from product_tbl order by pr_insert_date desc');

?>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ホーム</title>
<link rel ="stylesheet" href="vendor/twbs/bootstrap/dist/css/bootstrap.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

</head>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<body>

<div class="container">
	<h2>新着商品</h2>
	<div id="carousel-card" class="carousel slide">
		<div class="carousel-inner">
			<div class="carousel-item px-5 active">
				<div class="row">

<?php
$i = 0;
foreach ($sql as $row) {
    $pr_id=$row['pr_id'];
    if($i < 2){
?>
					<div class="col-6">
						<a href="detail.php?pr_id=<?php echo $pr_id;?>" class="card">
							<img class="card-img-top"src="image/<?php  echo $row['pr_id']?>.jpg"alt="Card image cap">
							<div class="card-body">
								<h5 class="card-title">商品名:<?php echo $row['pr_name'].'<br>';?></h5>
								<p class="card-text">値段:<?php echo $row['pr_price'];?>円</p>
							</div>
						</a>
					</div>

<?php
        if($i == 1){
?>

				</div>
			</div>
			<div class="carousel-item px-5">
				<div class="row">

<?php
        }
    }else if($i<4){
?>
					<div class="col-6">
						<a href="detail.php?pr_id=<?php echo $pr_id;?>" class="card">
							<img class="card-img-top"src="image/<?php  echo $row['pr_id']?>.jpg"alt="Card image cap">
							<div class="card-body">
								<h5 class="card-title">商品名:<?php echo $row['pr_name'].'<br>';?></h5>
								<p class="card-text">値段:<?php echo $row['pr_price'];?>円</p>
							</div>
						</a>
					</div>
<?php
    }
    $i++;
    if($i==4){
?>
				</div>
			</div>
			<div class="carousel-item px-5">
				<div class="row">
					<div class="col-6">
						<a href="detail.php?pr_id=<?php echo $pr_id;?>" class="card">
							<img class="card-img-top"src="image/<?php  echo $row['pr_id']?>.jpg"alt="Card image cap">
							<div class="card-body">
								<h5 class="card-title">商品名:<?php echo $row['pr_name'].'<br>';?></h5>
								<p class="card-text">値段:<?php echo $row['pr_price'];?>円</p>
							</div>
						</a>
					</div>
				</div>
			</div>

<?php
    }
    if($i > 4) {
        break;
    }
}
?>
		<a class="carousel-control-prev" href="#carousel-card" 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="#carousel-card" role="button" data-slide="next">
     		<span class="carousel-control-next-icon" aria-hidden="true"></span>
     	 	<span class="sr-only">Next</span>
     	</a>

	</div>
</div>

<style>
.carousel-control-next, .carousel-control-prev {
  width: 5%;
  background-color: #000;
}
.card{
    width:auto;
    height:25rem;
}
.card-img-top{
width:auto;
    height:18rem;
}
</style>
<?php require 'footer.php';?>

行動規範の内容に同意します

回答1件

ベストアンサー

まず一つ目ですが、Bootstrap4のカルーセルでは無理かと思われます。
ブラウザの開発ツールでhtmlを確認すればお分かりかと思いますが、スライドは.carousel-item単位で表示されるのでその中に2つ入れていたら2とも同時に表示され、同時に消えます。もしお望みの動作をするカルーセルをどうしても実現したいのであれば、ほかのプラグインを探すか自作するしかないでしょうね。

2つ目の質問は消されていますが、.carousel-innerの中身は以下のようにするとスッキリするのでご参考までに書いておきます。

php
1<?php
2$cnt = 5;
3for ($i = 0; $i < $cnt; $i ++):
4$row = $sql[$i];
5if ($i % 2 == 0):
6?>
7<div class="carousel-item px-5<?php if ($i == 0): ?> active<?php endif; ?>">
8    <div class="row">
9<?php endif; ?>
10        <div class="col-6">
11            <a href="detail.php?pr_id=<?php echo $pr_id;?>" class="card">
12                <img class="card-img-top"src="image/<?php  echo $row['pr_id']?>.jpg"alt="Card image cap">
13                <div class="card-body">
14                    <h5 class="card-title">商品名:<?php echo $row['pr_name'].'<br>';?></h5>
15                    <p class="card-text">値段:<?php echo $row['pr_price'];?>円</p>
16                </div>
17            </a>
18        </div>
19<?php if ($i % 2 == 1 || $i == $cnt - 1): ?>
20    </div>
21</div>
22<?php endif; endfor; ?>