質問編集履歴
2
title
CHANGED
File without changes
|
body
CHANGED
@@ -5,7 +5,6 @@
|
|
5
5
|
|1|2| 3 4 5
|
6
6
|
↓
|
7
7
|
|2|3| 4 5 1
|
8
|
-
-----------
|
9
8
|
のようにしたい
|
10
9
|
現在のコードだと
|
11
10
|
|1|2| 3 4 5
|
1
title
CHANGED
@@ -1,1 +1,1 @@
|
|
1
|
-
カルーセルの中のカード
|
1
|
+
カルーセルの中のカードを1枚ずつスライド
|
body
CHANGED
@@ -7,18 +7,18 @@
|
|
7
7
|
|2|3| 4 5 1
|
8
8
|
-----------
|
9
9
|
のようにしたい
|
10
|
-
|
11
|
-
2つ目
|
12
|
-
|
10
|
+
現在のコードだと
|
13
|
-
|
|
11
|
+
|1|2| 3 4 5
|
12
|
+
↓
|
14
|
-
|
13
|
+
|3|4| 5 1 2
|
15
|
-
|
14
|
+
となってしまう
|
16
15
|
``` 該当のソースコード
|
17
16
|
|
18
17
|
<?php require 'menu.php';?>
|
19
18
|
<?php
|
20
19
|
$pdo=new PDO('mysql:host=localhost;dbname=kaihatsu;charset=utf8','staff','password');
|
21
20
|
$sql=$pdo -> query('select * from product_tbl order by pr_insert_date desc');
|
21
|
+
|
22
22
|
?>
|
23
23
|
|
24
24
|
<!DOCTYPE html>
|
@@ -64,11 +64,29 @@
|
|
64
64
|
|
65
65
|
</div>
|
66
66
|
</div>
|
67
|
+
<div class="carousel-item px-5">
|
68
|
+
<div class="row">
|
67
69
|
|
68
70
|
<?php
|
69
71
|
}
|
70
|
-
}else{
|
72
|
+
}else if($i<4){
|
71
73
|
?>
|
74
|
+
<div class="col-6">
|
75
|
+
<a href="detail.php?pr_id=<?php echo $pr_id;?>" class="card">
|
76
|
+
<img class="card-img-top"src="image/<?php echo $row['pr_id']?>.jpg"alt="Card image cap">
|
77
|
+
<div class="card-body">
|
78
|
+
<h5 class="card-title">商品名:<?php echo $row['pr_name'].'<br>';?></h5>
|
79
|
+
<p class="card-text">値段:<?php echo $row['pr_price'];?>円</p>
|
80
|
+
</div>
|
81
|
+
</a>
|
82
|
+
</div>
|
83
|
+
<?php
|
84
|
+
}
|
85
|
+
$i++;
|
86
|
+
if($i==4){
|
87
|
+
?>
|
88
|
+
</div>
|
89
|
+
</div>
|
72
90
|
<div class="carousel-item px-5">
|
73
91
|
<div class="row">
|
74
92
|
<div class="col-6">
|
@@ -82,15 +100,14 @@
|
|
82
100
|
</div>
|
83
101
|
</div>
|
84
102
|
</div>
|
103
|
+
|
85
104
|
<?php
|
86
105
|
}
|
87
|
-
$i++;
|
88
106
|
if($i > 4) {
|
89
107
|
break;
|
90
108
|
}
|
91
109
|
}
|
92
110
|
?>
|
93
|
-
</div>
|
94
111
|
<a class="carousel-control-prev" href="#carousel-card" role="button" data-slide="prev">
|
95
112
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
96
113
|
<span class="sr-only">Previous</span>
|
@@ -109,72 +126,13 @@
|
|
109
126
|
background-color: #000;
|
110
127
|
}
|
111
128
|
.card{
|
129
|
+
width:auto;
|
112
130
|
height:25rem;
|
113
131
|
}
|
114
132
|
.card-img-top{
|
133
|
+
width:auto;
|
115
134
|
height:18rem;
|
116
135
|
}
|
117
136
|
</style>
|
118
137
|
<?php require 'footer.php';?>
|
119
|
-
```
|
138
|
+
```
|
120
|
-
|
121
|
-
### 試したこと
|
122
|
-
2つ目の質問に関して
|
123
|
-
なんとなくのイメージはあり、2回目の<div class="carousel-item px-5">をif(&1==1)の場所に
|
124
|
-
移動させたのですが5枚目をどのように扱えばいいのかがわかりません
|
125
|
-
|
126
|
-
```
|
127
|
-
|
128
|
-
foreach ($sql as $row) {
|
129
|
-
$pr_id=$row['pr_id'];
|
130
|
-
if($i < 2){
|
131
|
-
?>
|
132
|
-
<div class="col-6">
|
133
|
-
<a href="detail.php?pr_id=<?php echo $pr_id;?>" class="card">
|
134
|
-
<img class="card-img-top"src="image/<?php echo $row['pr_id']?>.jpg"alt="Card image cap">
|
135
|
-
<div class="card-body">
|
136
|
-
<h5 class="card-title">商品名:<?php echo $row['pr_name'].'<br>';?></h5>
|
137
|
-
<p class="card-text">値段:<?php echo $row['pr_price'];?>円</p>
|
138
|
-
</div>
|
139
|
-
</a>
|
140
|
-
</div>
|
141
|
-
|
142
|
-
<?php
|
143
|
-
if($i == 1){
|
144
|
-
?>
|
145
|
-
|
146
|
-
</div>
|
147
|
-
</div>
|
148
|
-
<div class="carousel-item px-5">
|
149
|
-
<div class="row">
|
150
|
-
|
151
|
-
<?php
|
152
|
-
}
|
153
|
-
}else{
|
154
|
-
?>
|
155
|
-
|
156
|
-
<div class="col-6">
|
157
|
-
<a href="detail.php?pr_id=<?php echo $pr_id;?>" class="card">
|
158
|
-
<img class="card-img-top"src="image/<?php echo $row['pr_id']?>.jpg"alt="Card image cap">
|
159
|
-
<div class="card-body">
|
160
|
-
<h5 class="card-title">商品名:<?php echo $row['pr_name'].'<br>';?></h5>
|
161
|
-
<p class="card-text">値段:<?php echo $row['pr_price'];?>円</p>
|
162
|
-
</div>
|
163
|
-
</a>
|
164
|
-
</div>
|
165
|
-
<?php
|
166
|
-
}
|
167
|
-
$i++;
|
168
|
-
if($i > 4) {
|
169
|
-
?>
|
170
|
-
</div>
|
171
|
-
</div>
|
172
|
-
<?php
|
173
|
-
break;
|
174
|
-
}
|
175
|
-
}
|
176
|
-
?>
|
177
|
-
```
|
178
|
-
### 補足情報(FW/ツールのバージョンなど)
|
179
|
-
|
180
|
-
ここにより詳細な情報を記載してください。
|