teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問JavaScriptを使ってレスポンシブに対応させたい

編集履歴

質問編集履歴

1

★レスポンシブさせたい箇所をわかりやすいように記載しました。

2021/05/12 08:24

投稿

yuuki777
yuuki777

スコア2

test CHANGED
File without changes
test CHANGED
@@ -230,17 +230,51 @@
230
230
 
231
231
 
232
232
 
233
+
234
+
235
+ ★レスポンシブさせたい箇所ですーーーーーーーーー↓
236
+
237
+ if(window.matchMedia('(max-width: 1000px)').matches) {
238
+
239
+ //タブレット処理
240
+
241
+ var swiper = new Swiper('.swiper-container', {
242
+
243
+ pagination: '.swiper-pagination',
244
+
245
+ slidesPerView: 3,
246
+
247
+ centeredSlides: true,//1枚目のスライド中央配置
248
+
249
+ paginationClickable: true,
250
+
251
+ loop: true,
252
+
253
+ spaceBetween: 30,
254
+
255
+ slideToClickedSlide: true,
256
+
233
257
 
234
258
 
259
+ autoplay: {
260
+
261
+ delay: 5000,
262
+
263
+ disableOnInteraction: true,
264
+
265
+ },
266
+
267
+ });
268
+
235
- if(window.matchMedia('(max-width: 1000px)').matches) {
269
+ } else if (window.matchMedia('(max-width:700px)').matches) {
236
-
270
+
237
- //タブレット処理
271
+ //スマホ処理
238
272
 
239
273
  var swiper = new Swiper('.swiper-container', {
240
274
 
241
275
  pagination: '.swiper-pagination',
242
276
 
243
- slidesPerView: 3,
277
+ slidesPerView: 2,
244
278
 
245
279
  centeredSlides: true,//1枚目のスライド中央配置
246
280
 
@@ -264,34 +298,4 @@
264
298
 
265
299
  });
266
300
 
267
- } else if (window.matchMedia('(max-width:700px)').matches) {
268
-
269
- //スマホ処理
270
-
271
- var swiper = new Swiper('.swiper-container', {
272
-
273
- pagination: '.swiper-pagination',
274
-
275
- slidesPerView: 2,
276
-
277
- centeredSlides: true,//1枚目のスライド中央配置
278
-
279
- paginationClickable: true,
301
+ ★レスポンシブさせたい箇所ですーーーーーーーーー↑
280
-
281
- loop: true,
282
-
283
- spaceBetween: 30,
284
-
285
- slideToClickedSlide: true,
286
-
287
-
288
-
289
- autoplay: {
290
-
291
- delay: 5000,
292
-
293
- disableOnInteraction: true,
294
-
295
- },
296
-
297
- });