teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問スマホ等の画面サイズにスライドショー幅を可変したい

編集履歴

質問編集履歴

2

cssを使用するよう、変更したため

2017/04/04 07:08

投稿

yoso
yoso

スコア27

test CHANGED
File without changes
test CHANGED
@@ -1,84 +1,28 @@
1
- wordpressで作成中のホームページにスライドショーを設置するため
1
+ wordpress上でCSSを使用しスライドショーを作成しましています。
2
2
 
3
- 下記サイトを参考に作成致しました。
4
-
5
-
6
-
7
- http://on-ze.com/archives/1388
3
+ スライドショーは動くのですが、スマホ等のページ幅に可変せず困っています。
8
4
 
9
5
 
10
6
 
11
7
  ```
12
8
 
13
- $(function(){
9
+ <div id="stage">
14
10
 
15
- // 設定
11
+ <div id="frame">
16
12
 
17
- var $width =640; // 横幅
13
+ <div id="photo1"><img src="image1.jpg"></div>
18
14
 
19
- var $height =300; // 高さ
15
+ <div id="photo2"><img src="image2.jpg"></div>
20
16
 
21
- var $interval = 3000; // 切り替わりの間隔（ミリ秒）
17
+ <div id="photo3"><img src="image3.jpg"></div>
22
18
 
23
- var $fade_speed = 1000; // フェード処理の早さ（ミリ秒）
19
+ <div id="photo4"><img src="image4.jpg"></div>
24
20
 
25
- $("#slide ul li").css({"position":"relative","overflow":"hidden","width":$width,"height":$height});
21
+ <div id="photo5"><img src="image5.jpg"></div>
26
22
 
27
- $("#slide ul li").hide().css({"position":"absolute","top":0,"left":0});
23
+ </div>
28
24
 
29
- $("#slide ul li:first").addClass("active").show();
30
-
31
- setInterval(function(){
32
-
33
- var $active = $("#slide ul li.active");
34
-
35
- var $next = $active.next("li").length?$active.next("li"):$("#slide ul li:first");
36
-
37
- $active.fadeOut($fade_speed).removeClass("active");
38
-
39
- $next.fadeIn($fade_speed).addClass("active");
40
-
41
- },$interval);
42
-
43
- });
44
-
45
- ```
46
-
47
-
48
-
49
- ↑ 現状、横幅はデモのまま640にしております。
50
-
51
- また、このままでは表示されなかったため以前こちらで教えていただきました
52
-
53
- 「$()」を「jQuery()」に書き換えましたが「$active」のような場合はどうすれば良いか分からずそのままです。
54
-
55
- 幅が合わないだけで、スライドショー自体は問題なく表示されています。
56
-
57
-
58
-
59
- ```
60
-
61
- #slide {
62
-
63
- width:640px;
64
-
65
- height:300px;
66
-
67
- margin:0 auto;
68
-
69
- position:relative;
25
+ </div>
70
-
71
- }
72
-
73
- #slide img {
74
-
75
- position:absolute;
76
-
77
- left:0;
78
-
79
- top:0;
80
-
81
- }
82
26
 
83
27
  ```
84
28
 
@@ -86,62 +30,154 @@
86
30
 
87
31
  ```
88
32
 
89
- <div id="slide">
33
+ <STYLE TYPE="text/css">
90
34
 
91
- <ul>
35
+ #stage {
92
36
 
93
- <li><a href=""><img src="/sample-01.png" alt="" width="640" height="300" /></a></li>
37
+ position: relative;
94
38
 
95
- <li><a href=""><img src="/sample-02.png" alt="" width="640" height="300" /></a></li>
39
+ width: 600px;
96
40
 
97
- <li><a href=""><img src="/sample-03.png" alt="" width="640" height="300" /></a></li>
41
+ height:338;
98
42
 
99
- </ul>
43
+ margin: 0 auto;
100
44
 
45
+ }
46
+
47
+ #photo1,#photo2,#photo3,#photo4,#photo5 {
48
+
49
+ position: absolute;
50
+
51
+ width: 600px;
52
+
53
+ height: 338px;
54
+
55
+ }
56
+
57
+ #photo1 img,#photo2 img,#photo3 img,#photo4 img,#photo5 img {
58
+
59
+ opacity:0;
60
+
61
+ -moz-animation: imgTrans 30s infinite;
62
+
63
+ -webkit-animation: imgTrans 30s infinite;
64
+
65
+ animation: imgTrans 30s infinite;
66
+
67
+ }
68
+
69
+ #photo1 img {
70
+
71
+ -moz-animation-delay: 0s;
72
+
73
+ -webkit-animation-delay: 0s;
74
+
75
+ animation-delay: 0s;
76
+
77
+ }
78
+
79
+ #photo2 img {
80
+
81
+ -moz-animation-delay: 6s;
82
+
83
+ -webkit-animation-delay: 6s;
84
+
85
+ animation-delay: 6s;
86
+
87
+ }
88
+
89
+ #photo3 img {
90
+
91
+ -moz-animation-delay: 12s;
92
+
93
+ -webkit-animation-delay: 12s;
94
+
95
+ animation-delay: 12s;
96
+
97
+ }
98
+
99
+ #photo4 img{
100
+
101
+ -moz-animation-delay: 18s;
102
+
103
+ -webkit-animation-delay: 18s;
104
+
105
+ animation-delay: 18s;
106
+
107
+ }
108
+
109
+ #photo5 img {
110
+
111
+ -moz-animation-delay: 24s;
112
+
113
+ -webkit-animation-delay: 24s;
114
+
115
+ animation-delay: 24s;
116
+
117
+ }
118
+
119
+ #frame {
120
+
121
+ width: 600px;
122
+
123
+ height: 338px;
124
+
125
+ position: relative;
126
+
127
+ overflow: hidden;
128
+
129
+ }
130
+
131
+ @-webkit-keyframes imgTrans {
132
+
133
+ 0% { opacity:0; }
134
+
135
+ 5% { opacity:1; }
136
+
137
+ 20% { opacity:1; }
138
+
139
+ 25% { opacity:0; }
140
+
141
+ 100% { opacity:0; }
142
+
143
+ }
144
+
145
+ @-moz-keyframes imgTrans {
146
+
147
+ 0% { opacity:0; }
148
+
149
+ 5% { opacity:1; }
150
+
151
+ 20% { opacity:1; }
152
+
153
+ 25% { opacity:0; }
154
+
155
+ 100% { opacity:0; }
156
+
157
+ }
158
+
159
+ @keyframes imgTrans {
160
+
161
+ 0% { opacity:0; }
162
+
163
+ 5% { opacity:1; }
164
+
165
+ 20% { opacity:1; }
166
+
167
+ 25% { opacity:0; }
168
+
169
+ 100% { opacity:0; }
170
+
171
+ }
172
+
101
- </div>
173
+ </style>
174
+
175
+
102
176
 
103
177
  ```
104
178
 
105
179
 
106
180
 
181
+ また、このスライドショー上に文字を配置することは可能でしょうか。
107
182
 
108
-
109
- スマホ等の画面サイズにスライドショー幅を可変したいので
110
-
111
- 「max-widthを100％」にしたり、
112
-
113
-
114
-
115
- ```
116
-
117
- $(window).on('load resize', function(){
118
-
119
- var w = $(window).width() * 1.05;
120
-
121
- $('div#wrapper').attr('width', w);
122
-
123
- });
124
-
125
- ```
126
-
127
-
128
-
129
- を試したのですが、サイズは大きなまま表示される。
130
-
131
- もしくは、スライドショー自体が動かなくなります。
132
-
133
-
134
-
135
- **スライドショーの画像を表示させたい画面幅に合わせるためにはどうすればよいでしょうか。**
136
-
137
-
138
-
139
-
140
-
141
- もしくは**CSS だけでスライドショーを作る**などもっと良い方法がありましたら、教えて下さいますようよろしくお願いいたします。
142
-
143
-
144
-
145
-
146
-
147
- 初歩的な事柄で週末からずっと詰まっています、お恥ずかしい限りですがお力添えよろしくお願いいたします。
183
+ 初歩的なこととは思いますが、ご教授願いますようお願いいたします。

1

調べているうちに、CSS だけでスライドショーを作るほうが良いと思ったため。

2017/04/04 07:08

投稿

yoso
yoso

スコア27

test CHANGED
File without changes
test CHANGED
@@ -134,7 +134,11 @@
134
134
 
135
135
  **スライドショーの画像を表示させたい画面幅に合わせるためにはどうすればよいでしょうか。**
136
136
 
137
+
138
+
139
+
140
+
137
- もしくはもっと良いスライドショーの方法がありましたら、教えて下さいますようよろしくお願いいたします。
141
+ もしくは**CSS だけでスライドショーを作る**などもっと良い方法がありましたら、教えて下さいますようよろしくお願いいたします。
138
142
 
139
143
 
140
144