質問編集履歴
2
cssを使用するよう、変更したため
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,74 +1,92 @@
|
|
|
1
|
-
wordpressで
|
|
1
|
+
wordpress上でCSSを使用しスライドショーを作成しましています。
|
|
2
|
-
|
|
2
|
+
スライドショーは動くのですが、スマホ等のページ幅に可変せず困っています。
|
|
3
3
|
|
|
4
|
-
http://on-ze.com/archives/1388
|
|
5
|
-
|
|
6
4
|
```
|
|
7
|
-
|
|
5
|
+
<div id="stage">
|
|
6
|
+
<div id="frame">
|
|
7
|
+
<div id="photo1"><img src="image1.jpg"></div>
|
|
8
|
+
<div id="photo2"><img src="image2.jpg"></div>
|
|
9
|
+
<div id="photo3"><img src="image3.jpg"></div>
|
|
10
|
+
<div id="photo4"><img src="image4.jpg"></div>
|
|
11
|
+
<div id="photo5"><img src="image5.jpg"></div>
|
|
8
|
-
/
|
|
12
|
+
</div>
|
|
9
|
-
|
|
13
|
+
</div>
|
|
10
|
-
var $height =300; // 高さ
|
|
11
|
-
var $interval = 3000; // 切り替わりの間隔（ミリ秒）
|
|
12
|
-
var $fade_speed = 1000; // フェード処理の早さ（ミリ秒）
|
|
13
|
-
$("#slide ul li").css({"position":"relative","overflow":"hidden","width":$width,"height":$height});
|
|
14
|
-
$("#slide ul li").hide().css({"position":"absolute","top":0,"left":0});
|
|
15
|
-
$("#slide ul li:first").addClass("active").show();
|
|
16
|
-
setInterval(function(){
|
|
17
|
-
var $active = $("#slide ul li.active");
|
|
18
|
-
var $next = $active.next("li").length?$active.next("li"):$("#slide ul li:first");
|
|
19
|
-
$active.fadeOut($fade_speed).removeClass("active");
|
|
20
|
-
$next.fadeIn($fade_speed).addClass("active");
|
|
21
|
-
},$interval);
|
|
22
|
-
});
|
|
23
14
|
```
|
|
24
15
|
|
|
25
|
-
↑ 現状、横幅はデモのまま640にしております。
|
|
26
|
-
また、このままでは表示されなかったため以前こちらで教えていただきました
|
|
27
|
-
「$()」を「jQuery()」に書き換えましたが「$active」のような場合はどうすれば良いか分からずそのままです。
|
|
28
|
-
幅が合わないだけで、スライドショー自体は問題なく表示されています。
|
|
29
|
-
|
|
30
16
|
```
|
|
17
|
+
<STYLE TYPE="text/css">
|
|
31
|
-
#
|
|
18
|
+
#stage {
|
|
32
|
-
width:640px;
|
|
33
|
-
height:300px;
|
|
34
|
-
margin:0 auto;
|
|
35
|
-
position:relative;
|
|
19
|
+
position: relative;
|
|
20
|
+
width: 600px;
|
|
21
|
+
height:338;
|
|
22
|
+
margin: 0 auto;
|
|
36
23
|
}
|
|
37
|
-
#
|
|
24
|
+
#photo1,#photo2,#photo3,#photo4,#photo5 {
|
|
38
|
-
position:absolute;
|
|
25
|
+
position: absolute;
|
|
39
|
-
|
|
26
|
+
width: 600px;
|
|
40
|
-
|
|
27
|
+
height: 338px;
|
|
41
28
|
}
|
|
29
|
+
#photo1 img,#photo2 img,#photo3 img,#photo4 img,#photo5 img {
|
|
30
|
+
opacity:0;
|
|
31
|
+
-moz-animation: imgTrans 30s infinite;
|
|
32
|
+
-webkit-animation: imgTrans 30s infinite;
|
|
33
|
+
animation: imgTrans 30s infinite;
|
|
34
|
+
}
|
|
35
|
+
#photo1 img {
|
|
36
|
+
-moz-animation-delay: 0s;
|
|
37
|
+
-webkit-animation-delay: 0s;
|
|
38
|
+
animation-delay: 0s;
|
|
39
|
+
}
|
|
40
|
+
#photo2 img {
|
|
41
|
+
-moz-animation-delay: 6s;
|
|
42
|
+
-webkit-animation-delay: 6s;
|
|
43
|
+
animation-delay: 6s;
|
|
44
|
+
}
|
|
45
|
+
#photo3 img {
|
|
46
|
+
-moz-animation-delay: 12s;
|
|
47
|
+
-webkit-animation-delay: 12s;
|
|
48
|
+
animation-delay: 12s;
|
|
49
|
+
}
|
|
50
|
+
#photo4 img{
|
|
51
|
+
-moz-animation-delay: 18s;
|
|
52
|
+
-webkit-animation-delay: 18s;
|
|
53
|
+
animation-delay: 18s;
|
|
54
|
+
}
|
|
55
|
+
#photo5 img {
|
|
56
|
+
-moz-animation-delay: 24s;
|
|
57
|
+
-webkit-animation-delay: 24s;
|
|
58
|
+
animation-delay: 24s;
|
|
59
|
+
}
|
|
42
|
-
|
|
60
|
+
#frame {
|
|
61
|
+
width: 600px;
|
|
62
|
+
height: 338px;
|
|
63
|
+
position: relative;
|
|
64
|
+
overflow: hidden;
|
|
65
|
+
}
|
|
66
|
+
@-webkit-keyframes imgTrans {
|
|
67
|
+
0% { opacity:0; }
|
|
68
|
+
5% { opacity:1; }
|
|
69
|
+
20% { opacity:1; }
|
|
70
|
+
25% { opacity:0; }
|
|
71
|
+
100% { opacity:0; }
|
|
72
|
+
}
|
|
73
|
+
@-moz-keyframes imgTrans {
|
|
74
|
+
0% { opacity:0; }
|
|
75
|
+
5% { opacity:1; }
|
|
76
|
+
20% { opacity:1; }
|
|
77
|
+
25% { opacity:0; }
|
|
78
|
+
100% { opacity:0; }
|
|
79
|
+
}
|
|
80
|
+
@keyframes imgTrans {
|
|
81
|
+
0% { opacity:0; }
|
|
82
|
+
5% { opacity:1; }
|
|
83
|
+
20% { opacity:1; }
|
|
84
|
+
25% { opacity:0; }
|
|
85
|
+
100% { opacity:0; }
|
|
86
|
+
}
|
|
87
|
+
</style>
|
|
43
88
|
|
|
44
89
|
```
|
|
45
|
-
<div id="slide">
|
|
46
|
-
<ul>
|
|
47
|
-
<li><a href=""><img src="/sample-01.png" alt="" width="640" height="300" /></a></li>
|
|
48
|
-
<li><a href=""><img src="/sample-02.png" alt="" width="640" height="300" /></a></li>
|
|
49
|
-
<li><a href=""><img src="/sample-03.png" alt="" width="640" height="300" /></a></li>
|
|
50
|
-
</ul>
|
|
51
|
-
</div>
|
|
52
|
-
```
|
|
53
90
|
|
|
54
|
-
|
|
55
|
-
スマホ等の画面サイズにスライドショー幅を可変したいので
|
|
56
|
-
「max-widthを100％」にしたり、
|
|
57
|
-
|
|
58
|
-
```
|
|
59
|
-
$(window).on('load resize', function(){
|
|
60
|
-
var w = $(window).width() * 1.05;
|
|
61
|
-
$('div#wrapper').attr('width', w);
|
|
62
|
-
});
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
を試したのですが、サイズは大きなまま表示される。
|
|
66
|
-
|
|
91
|
+
また、このスライドショー上に文字を配置することは可能でしょうか。
|
|
67
|
-
|
|
68
|
-
**スライドショーの画像を表示させたい画面幅に合わせるためにはどうすればよいでしょうか。**
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
もしくは**CSS だけでスライドショーを作る**などもっと良い方法がありましたら、教えて下さいますようよろしくお願いいたします。
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
初歩的な
|
|
92
|
+
初歩的なこととは思いますが、ご教授願いますようお願いいたします。
|
1
調べているうちに、CSS だけでスライドショーを作るほうが良いと思ったため。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -66,7 +66,9 @@
|
|
|
66
66
|
もしくは、スライドショー自体が動かなくなります。
|
|
67
67
|
|
|
68
68
|
**スライドショーの画像を表示させたい画面幅に合わせるためにはどうすればよいでしょうか。**
|
|
69
|
-
もしくはもっと良いスライドショーの方法がありましたら、教えて下さいますようよろしくお願いいたします。
|
|
70
69
|
|
|
71
70
|
|
|
71
|
+
もしくは**CSS だけでスライドショーを作る**などもっと良い方法がありましたら、教えて下さいますようよろしくお願いいたします。
|
|
72
|
+
|
|
73
|
+
|
|
72
74
|
初歩的な事柄で週末からずっと詰まっています、お恥ずかしい限りですがお力添えよろしくお願いいたします。
|