質問編集履歴
2
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
カルーセル
|
|
1
|
+
カルーセルがスライドしない
|
body
CHANGED
|
@@ -1,14 +1,10 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
|
+
phpの出力結果をbootstrapのカルーセルでスライドさせたい
|
|
2
3
|
|
|
3
|
-
・スライドさせると左右の左側だけカードが表示され、右が空白なので両方表示させたい
|
|
4
|
-
・スライドの際2枚ずつではなく1枚ずつスライドさせたい
|
|
5
|
-
|
|
6
|
-
|
|
7
4
|
### 発生している問題・エラーメッセージ
|
|
8
5
|
|
|
9
6
|
```
|
|
10
|
-
デフォルトは左右どちらにもカードが表示されているのですがスライドすると2枚同時にスライドし、
|
|
11
|
-
|
|
7
|
+
prev・nextともに反応なし
|
|
12
8
|
```
|
|
13
9
|
|
|
14
10
|
### 該当のソースコード
|
|
@@ -25,12 +21,7 @@
|
|
|
25
21
|
<head>
|
|
26
22
|
<meta charset="UTF-8">
|
|
27
23
|
<title>ホーム</title>
|
|
28
|
-
|
|
29
|
-
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
|
30
|
-
</head>
|
|
31
|
-
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
|
32
|
-
<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>
|
|
33
|
-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
|
|
24
|
+
|
|
34
25
|
<body>
|
|
35
26
|
|
|
36
27
|
<div class="container">
|
1
質問内容を変更しました
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
カルーセル
|
|
1
|
+
カルーセルを2枚ずつではなく1枚ずつスライドさせたい
|
body
CHANGED
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
|
-
phpで出力した結果を順番にbootstrapのカルーセルの中にカードを入れてスライドさせたい
|
|
3
2
|
|
|
3
|
+
・スライドさせると左右の左側だけカードが表示され、右が空白なので両方表示させたい
|
|
4
|
+
・スライドの際2枚ずつではなく1枚ずつスライドさせたい
|
|
5
|
+
|
|
6
|
+
|
|
4
7
|
### 発生している問題・エラーメッセージ
|
|
5
8
|
|
|
6
9
|
```
|
|
10
|
+
デフォルトは左右どちらにもカードが表示されているのですがスライドすると2枚同時にスライドし、
|
|
7
|
-
|
|
11
|
+
左側にだけ表示され右側は空白になっている
|
|
8
12
|
```
|
|
9
13
|
|
|
10
14
|
### 該当のソースコード
|
|
@@ -24,6 +28,9 @@
|
|
|
24
28
|
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
|
25
29
|
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
|
26
30
|
</head>
|
|
31
|
+
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
|
32
|
+
<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>
|
|
33
|
+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
|
|
27
34
|
<body>
|
|
28
35
|
|
|
29
36
|
<div class="container">
|