teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

2020/12/11 13:12

投稿

退会済みユーザー
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

2020/12/11 13:12

投稿

退会済みユーザー
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
- |12| |3〇| |4〇| |5〇|
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
- ここにより詳細な情報を記載してください。