2
を組み合わせたリストタグ：HTML画像タグと
私の実際のHTMLは、すでに表示に応じて、特定の画像を設定する<picture>タグを使用しています-portの向き、縦または横。 スライドショーのチュートリアルでは、<ul>といくつかの<li>要素を使ってスライドショーの画像を設定しています。
<ul>と<li>要素を<picture>要素内に作成しようとすると、ブラウザはイメージをもう見つけられません。
は、ここに私のコードの一部です：
HTML：
<div id="image">
<picture>
<source media="all and (orientation: portrait)" srcset="images/faust_portrait.jpg">
<source media="all and (orientation: landscape)" srcset="images/faust_landscape.jpg">
<img src="images/faust_1024.jpg" alt="faust">
</picture>
</div>
CSS：
#image {
width: 100%;
height: auto;
line-height: 0;
animation-name: move;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-delay: 0.5s;
animation-iteration-count: 2;
animation-direction: alternate;
}
@keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(100%);
}
}
#image img {
width: 100%;
}
だから現時点では、対応する画像は、再び1を画面の外にスライドするとされます時間。ビューポートの向きに応じて、2つのバージョンですべて5枚の写真を撮りたい）連続してスライドします。これは、Webページのヘッダーのいくつかの種類です。 これを行う方法に関する提案はありますか？