wordpress上でCSSを使用しスライドショーを作成しましています。
スライドショーは動くのですが、スマホ等のページ幅に可変せず困っています。
<div id="stage"> <div id="frame"> <div id="photo1"><img src="image1.jpg"></div> <div id="photo2"><img src="image2.jpg"></div> <div id="photo3"><img src="image3.jpg"></div> <div id="photo4"><img src="image4.jpg"></div> <div id="photo5"><img src="image5.jpg"></div> </div> </div>
<STYLE TYPE="text/css"> #stage { position: relative; width: 600px; height:338; margin: 0 auto; } #photo1,#photo2,#photo3,#photo4,#photo5 { position: absolute; width: 600px; height: 338px; } #photo1 img,#photo2 img,#photo3 img,#photo4 img,#photo5 img { opacity:0; -moz-animation: imgTrans 30s infinite; -webkit-animation: imgTrans 30s infinite; animation: imgTrans 30s infinite; } #photo1 img { -moz-animation-delay: 0s; -webkit-animation-delay: 0s; animation-delay: 0s; } #photo2 img { -moz-animation-delay: 6s; -webkit-animation-delay: 6s; animation-delay: 6s; } #photo3 img { -moz-animation-delay: 12s; -webkit-animation-delay: 12s; animation-delay: 12s; } #photo4 img{ -moz-animation-delay: 18s; -webkit-animation-delay: 18s; animation-delay: 18s; } #photo5 img { -moz-animation-delay: 24s; -webkit-animation-delay: 24s; animation-delay: 24s; } #frame { width: 600px; height: 338px; position: relative; overflow: hidden; } @-webkit-keyframes imgTrans { 0% { opacity:0; } 5% { opacity:1; } 20% { opacity:1; } 25% { opacity:0; } 100% { opacity:0; } } @-moz-keyframes imgTrans { 0% { opacity:0; } 5% { opacity:1; } 20% { opacity:1; } 25% { opacity:0; } 100% { opacity:0; } } @keyframes imgTrans { 0% { opacity:0; } 5% { opacity:1; } 20% { opacity:1; } 25% { opacity:0; } 100% { opacity:0; } } </style>
また、このスライドショー上に文字を配置することは可能でしょうか。
初歩的なこととは思いますが、ご教授願いますようお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/04/04 09:42
2017/04/04 09:53