teratail
回答率
85.29%
質問するログイン新規登録
トップSafariに関する質問全画面表示の縦スライドSwiperの設定について(フリックLP)

編集履歴

質問編集履歴

8

説明追加

2026/02/16 21:48

投稿

tn_coder
tn_coder

スコア0

title CHANGED
File without changes
body CHANGED
@@ -3,6 +3,8 @@
3
3
 
4
4
  その下に２つセクションとフッターがあり、最後のSwiper内ページが終わったら下のセクションにスクロールするようにしたいです。
5
5
 
6
+ ### 大まかなデザイン構成
7
+ 100vhのコンテンツはフリック、その後ブラウザスクロールして下のコンテンツを表示する。
6
8
  ![デザインの大まかな構成](https://ddjkaamml8q8x.cloudfront.net/questions/2026-02-13/597741a1-00df-4b3a-8ee1-51e8c2f6d8e2.jpeg)
7
9
 
8
10
  ### 発生している問題・分からないこと
SafariJavaScriptHTMLCSS

7

文言修正

2026/02/16 21:45

投稿

tn_coder
tn_coder

スコア0

title CHANGED
File without changes
body CHANGED
@@ -3,13 +3,13 @@
3
3
 
4
4
  その下に２つセクションとフッターがあり、最後のSwiper内ページが終わったら下のセクションにスクロールするようにしたいです。
5
5
 
6
+ ![デザインの大まかな構成](https://ddjkaamml8q8x.cloudfront.net/questions/2026-02-13/597741a1-00df-4b3a-8ee1-51e8c2f6d8e2.jpeg)
7
+
6
8
  ### 発生している問題・分からないこと
7
- PCでは出来たのですがスマホ表示だと固定ヘッダーあたりでしかスクロールできず、スライドから抜け出せません。
9
+ PCでは出来たのですがスマホ表示だと固定ヘッダーあたりでしかスクロールできず、Swiper内から抜け出せません。
8
10
 
9
11
  これは実現可能なのでしょうか？
10
12
 
11
- ![デザインの大まかな構成](https://ddjkaamml8q8x.cloudfront.net/questions/2026-02-13/597741a1-00df-4b3a-8ee1-51e8c2f6d8e2.jpeg)
12
-
13
13
  ### 該当のソースコード
14
14
 
15
15
 
SafariJavaScriptHTMLCSS

6

不要コード削除、文言修正

2026/02/16 21:43

投稿

tn_coder
tn_coder

スコア0

title CHANGED
@@ -1,1 +1,1 @@
1
- 全画面表示の縦スライダーについて
1
+ 全画面表示の縦スライドSwiperの設定について(フリックLP)
body CHANGED
@@ -1,7 +1,7 @@
1
1
  ### 実現したいこと
2
- 全画面表示で縦スライダーをSwiperで表示しました。(フリックLP)
2
+ 全画面表示で縦スライドのページをSwiperで表示しました。(フリックLP)
3
3
 
4
- その下に２つセクションとフッターがあり、最後のスライドが終わったら下のセクションにスクロールするようにしたいです。
4
+ その下に２つセクションとフッターがあり、最後のSwiper内ページが終わったら下のセクションにスクロールするようにしたいです。
5
5
 
6
6
  ### 発生している問題・分からないこと
7
7
  PCでは出来たのですがスマホ表示だと固定ヘッダーあたりでしかスクロールできず、スライドから抜け出せません。
@@ -46,25 +46,6 @@
46
46
  el: ".swiper-pagination",
47
47
  clickable: true,
48
48
  },
49
- on: {
50
- slideChange: function() {
51
- // エッジ以外のときはmousewheelを有効
52
- swiper.params.mousewheel.releaseOnEdges = true;
53
- },
54
- reachEnd: function() {
55
- // 最後のスライドに到達したら解除
56
- setTimeout(function () {
57
- swiper.params.mousewheel.releaseOnEdges = false;
58
- }, 500);
59
- },
60
- reachBeginning: function() {
61
- // 最初のスライドに到達したら解除
62
- setTimeout(function () {
63
- swiper.params.mousewheel.releaseOnEdges = false;
64
- }, 500);
65
- }
66
- }
67
-
68
49
  });
69
50
  ```
70
51
 
@@ -95,7 +76,7 @@
95
76
  touch-action: auto;
96
77
  }
97
78
 
98
- .sec_fv, .sec_2, .sec_3, .sec_4, .sec_5, .sec_6, .sec_7 {
79
+ .sec_fv, .sec_2, .sec_3, .sec_4, .sec_5 {
99
80
  height: 100%;
100
81
  width: 100%;
101
82
  position: relative;
@@ -131,9 +112,9 @@
131
112
  - [ ] その他
132
113
 
133
114
  ##### 上記の詳細・結果
134
- 最後のスライドからブラウザスクロールに移動する設定自体は出来てます(PCでは実現、スマホでは一部実現)
115
+ Swiper内の最後のコンテンツでブラウザスクロールに移動する設定自体は出来てます(PCでは実現、スマホでは一部実現)
135
116
 
136
- 全画面スライドで、最後のスライドから下にスクロールって出来るものなのでしょうか？
117
+ スマホ表示でも全画面表示のSwiperで、最後のコンテンツから下のコンテンツにスクロールって出来るものなのでしょうか？
137
118
 
138
119
  ### 補足
139
120
  フリックLPの依頼でこちら対応できませんでした。
SafariJavaScriptHTMLCSS

5

追記

2026/02/15 07:39

投稿

tn_coder
tn_coder

スコア0

title CHANGED
File without changes
body CHANGED
@@ -1,5 +1,5 @@
1
1
  ### 実現したいこと
2
- 全画面表示で縦スライダーをSwiperで表示しました。
2
+ 全画面表示で縦スライダーをSwiperで表示しました。(フリックLP)
3
3
 
4
4
  その下に２つセクションとフッターがあり、最後のスライドが終わったら下のセクションにスクロールするようにしたいです。
5
5
 
SafariJavaScriptHTMLCSS

4

デザインの大まかな構成を書いてみました。

2026/02/13 06:35

投稿

tn_coder
tn_coder

スコア0

title CHANGED
File without changes
body CHANGED
@@ -8,8 +8,8 @@
8
8
 
9
9
  これは実現可能なのでしょうか？
10
10
 
11
+ ![デザインの大まかな構成](https://ddjkaamml8q8x.cloudfront.net/questions/2026-02-13/597741a1-00df-4b3a-8ee1-51e8c2f6d8e2.jpeg)
11
12
 
12
-
13
13
  ### 該当のソースコード
14
14
 
15
15
 
SafariJavaScriptHTMLCSS

3

2026/02/13 06:02

投稿

tn_coder
tn_coder

スコア0

title CHANGED
File without changes
body CHANGED
@@ -11,7 +11,9 @@
11
11
 
12
12
 
13
13
  ### 該当のソースコード
14
+
15
+
14
- JS
16
+ ```JavaScript
15
17
  /* 1. アドレスバー・ツールバーを除いた100vhの高さを取得 */
16
18
  function setHeight() {
17
19
  let vh = window.innerHeight * 0.01;
@@ -64,8 +66,10 @@
64
66
  }
65
67
 
66
68
  });
69
+ ```
67
70
 
71
+
68
- CSS
72
+ ```CSS
69
73
  /* swiper */
70
74
  section.slider-part {
71
75
  width: 100%; /* 横幅を画面いっぱいに広げる */
@@ -97,9 +101,10 @@
97
101
  position: relative;
98
102
  top: 0;
99
103
  }
104
+ ```
100
105
 
101
106
 
102
- HTML
107
+ ```HTML
103
108
  <section class="slider-part">
104
109
  <div class="swiper-container mySwiper">
105
110
  　<div class="swiper-wrapper">
@@ -115,6 +120,10 @@
115
120
  <div class="sec_6"></div>
116
121
  <div class="sec_7"></div>
117
122
  <footer></footer>
123
+ ```
124
+
125
+
126
+
118
127
  ### 試したこと・調べたこと
119
128
  - [x] teratailやGoogle等で検索した
120
129
  - [x] ソースコードを自分なりに変更した
SafariJavaScriptHTMLCSS

2

スライド下にコンテンツ記載。　スライドが全画面表示で最後のスライドを表示後下のコンテンツにスクロールする

2026/02/13 05:14

投稿

tn_coder
tn_coder

スコア0

title CHANGED
File without changes
body CHANGED
@@ -112,7 +112,9 @@
112
112
  </div>
113
113
  </section>
114
114
 
115
-
115
+ <div class="sec_6"></div>
116
+ <div class="sec_7"></div>
117
+ <footer></footer>
116
118
  ### 試したこと・調べたこと
117
119
  - [x] teratailやGoogle等で検索した
118
120
  - [x] ソースコードを自分なりに変更した
SafariJavaScriptHTMLCSS

1

コード記載

2026/02/13 04:10

投稿

tn_coder
tn_coder

スコア0

title CHANGED
File without changes
body CHANGED
@@ -11,11 +11,108 @@
11
11
 
12
12
 
13
13
  ### 該当のソースコード
14
+ JS
15
+ /* 1. アドレスバー・ツールバーを除いた100vhの高さを取得 */
16
+ function setHeight() {
17
+ let vh = window.innerHeight * 0.01;
18
+ document.documentElement.style.setProperty("--vh", `${vh}px`);
19
+ }
20
+ setHeight();
21
+ window.addEventListener("resize", setHeight);
22
+ /* スライダー */
23
+ var swiper = new Swiper(".mySwiper", {
24
+ direction: "vertical",
25
+ slidesPerView: 1,
26
+ mousewheel: true,
27
+ autoHeight: true,
28
+ spaceBetween: 0,
29
+ nested: true,
30
+ keyboard: {
31
+ enabled: true,
32
+ },
33
+ effect: 'fade',
34
+ fadeEffect: {
35
+ crossFade: true,
36
+ },
37
+ mousewheel: {
38
+ enabled: true,
39
+ releaseOnEdges: true,
40
+ touchReleaseOnEdges: true,
41
+ forceToAxis: true,
42
+ },
43
+ pagination: {
44
+ el: ".swiper-pagination",
45
+ clickable: true,
46
+ },
47
+ on: {
48
+ slideChange: function() {
49
+ // エッジ以外のときはmousewheelを有効
50
+ swiper.params.mousewheel.releaseOnEdges = true;
51
+ },
52
+ reachEnd: function() {
53
+ // 最後のスライドに到達したら解除
54
+ setTimeout(function () {
55
+ swiper.params.mousewheel.releaseOnEdges = false;
56
+ }, 500);
57
+ },
58
+ reachBeginning: function() {
59
+ // 最初のスライドに到達したら解除
60
+ setTimeout(function () {
61
+ swiper.params.mousewheel.releaseOnEdges = false;
62
+ }, 500);
63
+ }
64
+ }
14
65
 
15
- ```
66
+ });
16
- 特になし
17
- ```
18
67
 
68
+ CSS
69
+ /* swiper */
70
+ section.slider-part {
71
+ width: 100%; /* 横幅を画面いっぱいに広げる */
72
+ height: 100vh; /* 縦幅を画面いっぱいに広げる */
73
+ height: calc(var(--vh, 1vh) * 100); /* 縦幅を画面いっぱいに広げる（アドレスバー・ツールバーの高さを除く） */
74
+ }
75
+
76
+ section.slider-part .mySwiper {
77
+ position: relative;
78
+ width: 100%;
79
+ height: 100%;
80
+ top: 0;
81
+ }
82
+
83
+ .swiper-slide {
84
+ height: 100%;
85
+ width: 100%;
86
+ display: flex;
87
+ justify-content: center;
88
+ align-items: center;
89
+ font-weight: bold;
90
+ -ms-touch-action: auto;
91
+ touch-action: auto;
92
+ }
93
+
94
+ .sec_fv, .sec_2, .sec_3, .sec_4, .sec_5, .sec_6, .sec_7 {
95
+ height: 100%;
96
+ width: 100%;
97
+ position: relative;
98
+ top: 0;
99
+ }
100
+
101
+
102
+ HTML
103
+ <section class="slider-part">
104
+ <div class="swiper-container mySwiper">
105
+ 　<div class="swiper-wrapper">
106
+ 　　<div class="swiper-slide slide1"><div class="sec_1"></div></div>
107
+ 　　<div class="swiper-slide slide2"><div class="sec_2"></div></div>
108
+ 　　<div class="swiper-slide slide3"><div class="sec_3"></div></div>
109
+ 　　<div class="swiper-slide slide4"><div class="sec_4"></div></div>
110
+ 　　<div class="swiper-slide slide5"><div class="sec_5"></div></div>
111
+ 　</div>
112
+ </div>
113
+ </section>
114
+
115
+
19
116
  ### 試したこと・調べたこと
20
117
  - [x] teratailやGoogle等で検索した
21
118
  - [x] ソースコードを自分なりに変更した
SafariJavaScriptHTMLCSS