teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問swiper スライダーの要素の高さ

編集履歴

質問編集履歴

6

デモサイト削除

2016/12/14 10:20

投稿

flare
flare

スコア12

test CHANGED
File without changes
test CHANGED
@@ -10,11 +10,7 @@
10
10
 
11
11
 
12
12
 
13
-
14
-
15
- [デモサイト](http://ug-group.onamae.jp/slider_dev.html)
13
+ デモサイト
16
-
17
-
18
14
 
19
15
 
20
16
 

5

修正：参考サイト

2016/12/14 10:20

投稿

flare
flare

スコア12

test CHANGED
File without changes
test CHANGED
@@ -142,9 +142,7 @@
142
142
 
143
143
 
144
144
 
145
-
146
-
147
- [参考サイト](http://blog.mismithportfolio.com/web/20150917slickjs)
145
+ [参考サイト](http://idangero.us/swiper/demos/#.WE67z7KLSHs)
148
146
 
149
147
 
150
148
 

4

追加：質問本文

2016/12/12 15:02

投稿

flare
flare

スコア12

test CHANGED
File without changes
test CHANGED
@@ -3,6 +3,8 @@
3
3
 
4
4
 
5
5
  実装途中のものをアップしているデモサイトになります。
6
+
7
+ ※この場合、750px
6
8
 
7
9
 
8
10
 

3

追加：デモサイト、参考サイト

2016/12/12 14:54

投稿

flare
flare

スコア12

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,29 @@
2
2
 
3
3
 
4
4
 
5
+ 実装途中のものをアップしているデモサイトになります。
6
+
7
+
8
+
9
+
10
+
11
+
12
+
13
+ [デモサイト](http://ug-group.onamae.jp/slider_dev.html)
14
+
15
+
16
+
17
+
18
+
19
+
20
+
21
+ デモサイトにある、グレーのスライド部分が今回実装を試みている箇所なのですが、スライダーの下にスライドしている画像の幅の分だけ空白ができてしまいます。
22
+
23
+
24
+
5
- 以下<body>部分のソースになります。
25
+ 以下、HTMLのソースになります。
26
+
27
+
6
28
 
7
29
 
8
30
 
@@ -10,47 +32,105 @@
10
32
 
11
33
  ```ここに言語を入力
12
34
 
35
+ <html>
36
+
37
+
38
+
39
+ <head>
40
+
41
+
42
+
43
+ <link rel="stylesheet" href="./css/swiper.css">
44
+
45
+ <script src="./js/swiper.js"></script>
46
+
47
+
48
+
49
+ </head>
50
+
51
+
52
+
13
53
  <body>
14
54
 
15
- <div id="wrapper" style="margin: 0 auto; width: 400px;"
16
55
 
17
- <div class="swiper-container">
18
56
 
19
- <div class="swiper-wrapper">
57
+ <div style="width: 360px; margin: 0 auto;">
20
58
 
21
-
22
59
 
23
- <div class="swiper-slide">
24
60
 
25
- <img src="001.jpg" width="100%">
61
+ <img src="http://placehold.it/750x250/000/FFF" width="100%" />
26
62
 
27
- </div>
63
+
28
64
 
29
-
65
+ <div id="sliders">
30
66
 
31
- <div class="swiper-slide">
67
+ <div class="swiper-container">
32
68
 
33
- <img src="002.jpg" width="100%">
69
+ <div class="swiper-wrapper">
34
70
 
35
- </div>
71
+
36
72
 
37
-
73
+ <div class="swiper-slide">
38
74
 
39
- <div class="swiper-slide">
75
+ <img src="http://placehold.it/750x200" width="100%">
40
76
 
77
+ </div>
78
+
79
+
80
+
81
+ <div class="swiper-slide">
82
+
41
- <img src="003.jpg" width="100%">
83
+ <img src="http://placehold.it/750x200" width="100%">
84
+
85
+ </div>
86
+
87
+
88
+
89
+ <div class="swiper-slide">
90
+
91
+ <img src="http://placehold.it/750x200" width="100%">
92
+
93
+ </div>
94
+
95
+
42
96
 
43
97
  </div>
44
-
45
-
46
98
 
47
99
  </div>
48
100
 
49
101
  </div>
50
102
 
103
+
104
+
105
+ <img src="http://placehold.it/750x250/000/FFF" width="100%" />
106
+
107
+
108
+
51
109
  </div>
52
110
 
111
+
112
+
113
+ <script>
114
+
115
+ var swiper = new Swiper('.swiper-container', {
116
+
117
+ loop: true,
118
+
119
+ autoplay: 500
120
+
121
+ });
122
+
123
+ </script>
124
+
125
+
126
+
127
+
128
+
53
129
  </body>
130
+
131
+
132
+
133
+ </html>
54
134
 
55
135
 
56
136
 
@@ -60,12 +140,10 @@
60
140
 
61
141
 
62
142
 
143
+
144
+
63
- img要素に使用している画像のサイズは、幅：780px、高さ：250pxになります。
145
+ [参考サイト](http://blog.mismithportfolio.com/web/20150917slickjs)
64
146
 
65
147
 
66
148
 
67
- このままですと、ウィンドウの高さが250px以上の場合、スライダーの下の部分に空白ができてしまいます。
68
-
69
-
70
-
71
- wrapperの幅に合わせて、フレキシブルにスライド部分の縦横比を、画像の縦横比と同じ比率で維持できる方法をご教授下さい。
149
+ 上記参考サイトのデモページでは、スライド部分の下に空白などないのですが、なにがいけないのでしょうか？？

2

追加：現象が発生する際の、ウィンドウの高さ

2016/12/12 14:53

投稿

flare
flare

スコア12

test CHANGED
File without changes
test CHANGED
@@ -58,11 +58,13 @@
58
58
 
59
59
 
60
60
 
61
+
62
+
61
63
  img要素に使用している画像のサイズは、幅：780px、高さ：250pxになります。
62
64
 
63
65
 
64
66
 
65
- このままですと、スライダーの下の部分に空白ができてしまいます。
67
+ このままですと、ウィンドウの高さが250px以上の場合、スライダーの下の部分に空白ができてしまいます。
66
68
 
67
69
 
68
70
 

1

コードブロック化しました。

2016/12/12 13:00

投稿

flare
flare

スコア12

test CHANGED
File without changes
test CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
 
10
10
 
11
-
11
+ ```ここに言語を入力
12
12
 
13
13
  <body>
14
14
 
@@ -50,9 +50,11 @@
50
50
 
51
51
  </div>
52
52
 
53
- </div>
53
+ </body>
54
54
 
55
55
 
56
+
57
+ ```
56
58
 
57
59
 
58
60