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

質問編集履歴

2

コードの修正

2019/06/10 04:14

投稿

YutoYamada
YutoYamada

スコア11

title CHANGED
File without changes
body CHANGED
@@ -11,6 +11,7 @@
11
11
  ```
12
12
 
13
13
  ### 該当のソースコード
14
+ ```
14
15
  -HTML-
15
16
  <div class="swiper-container">
16
17
  <h2>Home page<i class="fas fa-desktop"></i></h2>
@@ -89,6 +90,7 @@
89
90
  <div class="swiper-scrollbar3"></div>
90
91
 
91
92
  </div>
93
+ ```
92
94
 
93
95
  ```
94
96
 
@@ -227,6 +229,7 @@
227
229
 
228
230
  ```
229
231
 
232
+ ```
230
233
  -JavaScript-
231
234
  var mySwiper = new Swiper('.swiper-container', {
232
235
  effect: 'coverflow',
@@ -291,6 +294,8 @@
291
294
  }
292
295
  });
293
296
 
297
+ ```
298
+
294
299
  ### 試したこと
295
300
 
296
301
  ここに問題に対して試したことを記載してください。

1

コードの修正

2019/06/10 04:14

投稿

YutoYamada
YutoYamada

スコア11

title CHANGED
File without changes
body CHANGED
@@ -1,12 +1,11 @@
1
1
  ### 前提・実現したいこと
2
- swiperを使用して1ページにスライダーを3つ表示する方法
2
+ swiperを使用して1ページにスライダーを3つ表示して各スライダーの画像を変更する方法
3
3
  ここに質問の内容を詳しく書いてください。
4
4
 
5
- swiperで1ページ内にスライダー3つ表示させたいのですがうまくいかないため、エラーの修正方法またはどこをいじってコピー&ペーストすれば3つ表示きるかをおしえていただきたいです。
5
+ swiperで1ページ内にスライダー3つ表示させてそれぞれのスライダーの中身の画像を変え実装したいのですがうまくいかないです。
6
6
 
7
-
8
7
  ### 発生している問題・エラーメッセージ
9
-
8
+ 2つ目と3つ目のスライダーがレイアウトが崩れてしまう。
10
9
  ```
11
10
  エラーメッセージ
12
11
  ```
@@ -39,6 +38,60 @@
39
38
 
40
39
  </div>
41
40
 
41
+ <div class="swiper-container2">
42
+ <h2>App<i class="fas fa-desktop"></i></h2>
43
+ <!-- Additional required wrapper -->
44
+ <div class="swiper-wrapper2">
45
+
46
+ <!-- Slides -->
47
+ <div class="swiper-slide2">Slide1</div>
48
+
49
+ <div class="swiper-slide2">Slide2</div>
50
+
51
+ <div class="swiper-slide2">Slide3</div>
52
+ <div class="swiper-slide2">Slide4</div>
53
+
54
+ </div>
55
+ <!-- ページネーション -->
56
+ <div class="swiper-pagination2"></div>
57
+
58
+ <!-- ナビゲーションボタン -->
59
+ <div class="swiper-button-prev2"></div>
60
+ <div class="swiper-button-next2"></div>
61
+
62
+ <!-- スクロールバー -->
63
+ <div class="swiper-scrollbar2"></div>
64
+
65
+ </div>
66
+
67
+ <div class="swiper-container3">
68
+ <h2>Home page<i class="fas fa-desktop"></i></h2>
69
+ <!-- Additional required wrapper -->
70
+ <div class="swiper-wrapper3">
71
+
72
+ <!-- Slides -->
73
+ <div class="swiper-slide3">Slide1</div>
74
+
75
+ <div class="swiper-slide3">Slide2</div>
76
+
77
+ <div class="swiper-slide3">Slide3</div>
78
+ <div class="swiper-slide3">Slide4</div>
79
+
80
+ </div>
81
+ <!-- ページネーション -->
82
+ <div class="swiper-pagination3"></div>
83
+
84
+ <!-- ナビゲーションボタン -->
85
+ <div class="swiper-button-prev3"></div>
86
+ <div class="swiper-button-next3"></div>
87
+
88
+ <!-- スクロールバー -->
89
+ <div class="swiper-scrollbar3"></div>
90
+
91
+ </div>
92
+
93
+ ```
94
+
42
95
  -css-
43
96
  .swiper-button-prev{
44
97
  padding: 100px 0;
@@ -84,6 +137,96 @@
84
137
  background-size:cover;
85
138
  }
86
139
 
140
+ .swiper-button-prev2{
141
+ padding: 100px 0;
142
+
143
+ }
144
+ .swiper-button-next2{
145
+ padding: 100px 0;
146
+ }
147
+ .swiper-container2 {
148
+ width: 100%;
149
+ height: 100%;
150
+ text-align: center;
151
+ }
152
+
153
+ .swiper-wrapper2 {
154
+ width: 100%;
155
+ height: 250px;
156
+ }
157
+ .swiper-slide2 {
158
+ color: #ffffff;
159
+ width: 100%;
160
+ height: 100%;
161
+ text-align: center;
162
+ line-height: 250px;
163
+ }
164
+ .swiper-slide2:nth-child(4n+1) {
165
+ background-image: url(../img/header3.png);
166
+ background-size:cover;
167
+ }
168
+ /* 4の倍数+2枚目のスライドのスタイル(2枚目、6枚目…) */
169
+ .swiper-slide2:nth-child(4n+2) {
170
+ background-image: url(../img/header.png);
171
+ background-size:cover;
172
+ }
173
+ /* 4の倍数+3枚目のスライドのスタイル(3枚目、7枚目…) */
174
+ .swiper-slid2e:nth-child(4n+3) {
175
+ background-image: url(../img/header.png);
176
+ background-size:cover;
177
+ }
178
+ /* 4の倍数+4枚目のスライドのスタイル(4枚目、8枚目…) */
179
+ .swiper-slide2:nth-child(4n+4) {
180
+ background-image: url(../img/header3.png);
181
+ background-size:cover;
182
+ }
183
+
184
+ .swiper-button-prev3{
185
+ padding: 100px 0;
186
+
187
+ }
188
+ .swiper-button-next3{
189
+ padding: 100px 0;
190
+ }
191
+ .swiper-container3 {
192
+ width: 100%;
193
+ height: 100%;
194
+ text-align: center;
195
+ }
196
+
197
+ .swiper-wrapper3 {
198
+ width: 100%;
199
+ height: 250px;
200
+ }
201
+ .swiper-slide3 {
202
+ color: #ffffff;
203
+ width: 100%;
204
+ height: 100%;
205
+ text-align: center;
206
+ line-height: 250px;
207
+ }
208
+ .swiper-slide3:nth-child(4n+1) {
209
+ background-image: url(../img/header3.png);
210
+ background-size:cover;
211
+ }
212
+ /* 4の倍数+2枚目のスライドのスタイル(2枚目、6枚目…) */
213
+ .swiper-slide3:nth-child(4n+2) {
214
+ background-image: url(../img/header.png);
215
+ background-size:cover;
216
+ }
217
+ /* 4の倍数+3枚目のスライドのスタイル(3枚目、7枚目…) */
218
+ .swiper-slide3:nth-child(4n+3) {
219
+ background-image: url(../img/header.png);
220
+ background-size:cover;
221
+ }
222
+ /* 4の倍数+4枚目のスライドのスタイル(4枚目、8枚目…) */
223
+ .swiper-slide3:nth-child(4n+4) {
224
+ background-image: url(../img/header3.png);
225
+ background-size:cover;
226
+ }
227
+
228
+ ```
229
+
87
230
  -JavaScript-
88
231
  var mySwiper = new Swiper('.swiper-container', {
89
232
  effect: 'coverflow',
@@ -106,6 +249,48 @@
106
249
  }
107
250
  });
108
251
 
252
+ var mySwiper = new Swiper('.swiper-container2', {
253
+ effect: 'coverflow',
254
+ slidesPerView: 3,
255
+ autoplay: {
256
+ delay: 3000,
257
+ stopOnLastSlide: false,
258
+ disableOnInteraction: false,
259
+ reverseDirection: false
260
+ },
261
+ loop: true,
262
+ navigation: {
263
+ nextEl: '.swiper-button-next2',
264
+ prevEl: '.swiper-button-prev2'
265
+ },
266
+ pagination: {
267
+ el: '.swiper-pagination2',
268
+ type: 'bullets',
269
+ clickable: true
270
+ }
271
+ });
272
+
273
+ var mySwiper = new Swiper('.swiper-container3', {
274
+ effect: 'coverflow',
275
+ slidesPerView: 3,
276
+ autoplay: {
277
+ delay: 3000,
278
+ stopOnLastSlide: false,
279
+ disableOnInteraction: false,
280
+ reverseDirection: false
281
+ },
282
+ loop: true,
283
+ navigation: {
284
+ nextEl: '.swiper-button-next3',
285
+ prevEl: '.swiper-button-prev3'
286
+ },
287
+ pagination: {
288
+ el: '.swiper-pagination3',
289
+ type: 'bullets',
290
+ clickable: true
291
+ }
292
+ });
293
+
109
294
  ### 試したこと
110
295
 
111
296
  ここに問題に対して試したことを記載してください。