回答編集履歴
2
Fix the second slider
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
どんなレイアウトがご希望か
|
|
1
|
+
どんなレイアウトがご希望かあまり理解できていなくて申し訳ありません…想像で作ってみました。
|
|
2
2
|
こんな感じの見た目で大丈夫でしょうか？
|
|
3
3
|
|
|
4
4
|
|
|
@@ -68,17 +68,28 @@
|
|
|
68
68
|
|
|
69
69
|
---
|
|
70
70
|
|
|
71
|
-
こ
|
|
71
|
+
またはこちらの見た目でしょうか？
|
|
72
|
-
|
|
73
|
-
- 動作確認サンプル：https://jsfiddle.net/5w3fk0yc/
|
|
73
|
+
- 動作確認サンプル：https://jsfiddle.net/5w3fk0yc/3/
|
|
74
74
|
```javascript
|
|
75
75
|
const swiper = new Swiper('.swiper', {
|
|
76
76
|
autoplay: {
|
|
77
77
|
delay: 4000,
|
|
78
78
|
},
|
|
79
|
+
centeredSlides: true,
|
|
79
80
|
centeredSlidesBounds: true,
|
|
80
81
|
loop: true,
|
|
81
82
|
slidesPerView: 3.5,
|
|
82
83
|
});
|
|
83
84
|
```
|
|
85
|
+
- 1を中央ではなく左から開始するために、**_HTMLで画像の順番を２→３→４→１にしています。_**
|
|
84
|
-
|
|
86
|
+
- CSSは1つ目のスライダーと共通です。
|
|
87
|
+
|
|
88
|
+
---
|
|
89
|
+
|
|
90
|
+
> **_centeredSlidesBounds
|
|
91
|
+
> If true, then active slide will be centered without adding gaps at the beginning and end of slider. Required centeredSlides: true. Not intended to be used with loop or pagination_**
|
|
92
|
+
> trueのとき、アクティブ状態のスライドが両隣の隙間なしに中央に配置されます。centeredSlidesがtrueであることが必須です。このパラメーターはループやページネーションには作用しません。
|
|
93
|
+
（[公式ドキュメントより引用](https://swiperjs.com/swiper-api#param-centeredSlidesBounds)）
|
|
94
|
+
|
|
95
|
+
とありますので、質問者様の隙間もこれで消えてくれないかな…と期待しています。
|
1
add another slider
test
CHANGED
|
@@ -65,3 +65,20 @@
|
|
|
65
65
|
</div>
|
|
66
66
|
</div>
|
|
67
67
|
```
|
|
68
|
+
|
|
69
|
+
---
|
|
70
|
+
|
|
71
|
+
こっちの見た目でしょうか？
|
|
72
|
+
|
|
73
|
+
- 動作確認サンプル：https://jsfiddle.net/5w3fk0yc/1/
|
|
74
|
+
```javascript
|
|
75
|
+
const swiper = new Swiper('.swiper', {
|
|
76
|
+
autoplay: {
|
|
77
|
+
delay: 4000,
|
|
78
|
+
},
|
|
79
|
+
centeredSlidesBounds: true,
|
|
80
|
+
loop: true,
|
|
81
|
+
slidesPerView: 3.5,
|
|
82
|
+
});
|
|
83
|
+
```
|
|
84
|
+
HTML/CSSは1つ目のスライダーと共通です。
|