質問編集履歴

2

2020/12/11 13:12

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -12,8 +12,6 @@
12
12
 
13
13
  |2|3| 4 5 1
14
14
 
15
- -----------
16
-
17
15
  のようにしたい
18
16
 
19
17
  現在のコードだと

1

2020/12/11 13:12

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- カルーセルの中のカード
1
+ カルーセルの中のカードを1枚ずつスライド
test CHANGED
@@ -16,17 +16,15 @@
16
16
 
17
17
  のようにしたい
18
18
 
19
-
20
-
21
- 2つ目
22
-
23
- 現在のコードだと
19
+ 現在のコードだと
24
-
20
+
25
- |12| |3〇| |4〇| |5〇|
21
+ |1|2| 3 4 5
22
+
26
-
23
+
24
+
27
- のように初期以外に左側のみ表示されます
25
+ |3|4| 5 1 2
26
+
28
-
27
+ となってしまう
29
-
30
28
 
31
29
  ``` 該当のソースコード
32
30
 
@@ -40,6 +38,8 @@
40
38
 
41
39
  $sql=$pdo -> query('select * from product_tbl order by pr_insert_date desc');
42
40
 
41
+
42
+
43
43
  ?>
44
44
 
45
45
 
@@ -130,15 +130,51 @@
130
130
 
131
131
  </div>
132
132
 
133
+ <div class="carousel-item px-5">
134
+
135
+ <div class="row">
136
+
133
137
 
134
138
 
135
139
  <?php
136
140
 
137
141
  }
138
142
 
139
- }else{
143
+ }else if($i<4){
140
-
144
+
141
- ?>
145
+ ?>
146
+
147
+ <div class="col-6">
148
+
149
+ <a href="detail.php?pr_id=<?php echo $pr_id;?>" class="card">
150
+
151
+ <img class="card-img-top"src="image/<?php echo $row['pr_id']?>.jpg"alt="Card image cap">
152
+
153
+ <div class="card-body">
154
+
155
+ <h5 class="card-title">商品名:<?php echo $row['pr_name'].'<br>';?></h5>
156
+
157
+ <p class="card-text">値段:<?php echo $row['pr_price'];?>円</p>
158
+
159
+ </div>
160
+
161
+ </a>
162
+
163
+ </div>
164
+
165
+ <?php
166
+
167
+ }
168
+
169
+ $i++;
170
+
171
+ if($i==4){
172
+
173
+ ?>
174
+
175
+ </div>
176
+
177
+ </div>
142
178
 
143
179
  <div class="carousel-item px-5">
144
180
 
@@ -166,12 +202,12 @@
166
202
 
167
203
  </div>
168
204
 
205
+
206
+
169
207
  <?php
170
208
 
171
209
  }
172
210
 
173
- $i++;
174
-
175
211
  if($i > 4) {
176
212
 
177
213
  break;
@@ -182,8 +218,6 @@
182
218
 
183
219
  ?>
184
220
 
185
- </div>
186
-
187
221
  <a class="carousel-control-prev" href="#carousel-card" role="button" data-slide="prev">
188
222
 
189
223
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
@@ -220,12 +254,16 @@
220
254
 
221
255
  .card{
222
256
 
257
+ width:auto;
258
+
223
259
  height:25rem;
224
260
 
225
261
  }
226
262
 
227
263
  .card-img-top{
228
264
 
265
+ width:auto;
266
+
229
267
  height:18rem;
230
268
 
231
269
  }
@@ -235,125 +273,3 @@
235
273
  <?php require 'footer.php';?>
236
274
 
237
275
  ```
238
-
239
-
240
-
241
- ### 試したこと
242
-
243
- 2つ目の質問に関して
244
-
245
- なんとなくのイメージはあり、2回目の<div class="carousel-item px-5">をif(&1==1)の場所に
246
-
247
- 移動させたのですが5枚目をどのように扱えばいいのかがわかりません
248
-
249
-
250
-
251
- ```
252
-
253
-
254
-
255
- foreach ($sql as $row) {
256
-
257
- $pr_id=$row['pr_id'];
258
-
259
- if($i < 2){
260
-
261
- ?>
262
-
263
- <div class="col-6">
264
-
265
- <a href="detail.php?pr_id=<?php echo $pr_id;?>" class="card">
266
-
267
- <img class="card-img-top"src="image/<?php echo $row['pr_id']?>.jpg"alt="Card image cap">
268
-
269
- <div class="card-body">
270
-
271
- <h5 class="card-title">商品名:<?php echo $row['pr_name'].'<br>';?></h5>
272
-
273
- <p class="card-text">値段:<?php echo $row['pr_price'];?>円</p>
274
-
275
- </div>
276
-
277
- </a>
278
-
279
- </div>
280
-
281
-
282
-
283
- <?php
284
-
285
- if($i == 1){
286
-
287
- ?>
288
-
289
-
290
-
291
- </div>
292
-
293
- </div>
294
-
295
- <div class="carousel-item px-5">
296
-
297
- <div class="row">
298
-
299
-
300
-
301
- <?php
302
-
303
- }
304
-
305
- }else{
306
-
307
- ?>
308
-
309
-
310
-
311
- <div class="col-6">
312
-
313
- <a href="detail.php?pr_id=<?php echo $pr_id;?>" class="card">
314
-
315
- <img class="card-img-top"src="image/<?php echo $row['pr_id']?>.jpg"alt="Card image cap">
316
-
317
- <div class="card-body">
318
-
319
- <h5 class="card-title">商品名:<?php echo $row['pr_name'].'<br>';?></h5>
320
-
321
- <p class="card-text">値段:<?php echo $row['pr_price'];?>円</p>
322
-
323
- </div>
324
-
325
- </a>
326
-
327
- </div>
328
-
329
- <?php
330
-
331
- }
332
-
333
- $i++;
334
-
335
- if($i > 4) {
336
-
337
- ?>
338
-
339
- </div>
340
-
341
- </div>
342
-
343
- <?php
344
-
345
- break;
346
-
347
- }
348
-
349
- }
350
-
351
- ?>
352
-
353
- ```
354
-
355
- ### 補足情報(FW/ツールのバージョンなど)
356
-
357
-
358
-
359
- ここにより詳細な情報を記載してください。