Html - スライダの幅と高さを変更する

Question

PHPとHTMLを使って教育目的で動的なウェブサイトを作成しています。

私はこのビデオのような「スライドショー」を作成しようとしています。 https://www.youtube.com/watch?v=L-vBR3vzOe8

しかし、私は幅と高さの希望量を設定するのが難しかったです（小さすぎます）。私は最後の1時間のコードで遊んでいたし、私はそれを把握することはできません。

私は正しい方向で私を指すのに十分な種類ですか？

CSSコード：：私のコードは次のようなものを探している

@keyframes slider { 

0% { 
    left: 0; 
} 

20% { 
    left: 0; 
} 

25% { 
    left: -100%; 
} 

45% { 
    left: -100%; 

} 

50% { 
    left: -200%; 

} 

70% { 
    left: -200%; 
} 

75% { 
    left: -300%; 
} 

95% { 
    left: -300%; 
} 

100% { 
    left: -400%; 

} 

} 

#slider { 
    overflow: hidden; 

} 

#slider figure img { 
    width:20%; 
    float: left; 

} 

#slider figure { 
    position: relative; 
    width: 500%; 
    margin: 0; 
    left: 0; 
    text-align: left; 
    font-size: 0; 
    animation: 20s slider infinite; 

} 

は、これは私のHTMLコードです：事前に

<div id ="slider" > 
      <figure> 
      <img src ="Images/img1.jpg"> 
      <img src ="Images/img2.jpg"> 
      <img src ="Images/img3.jpg"> 
      <img src ="Images/img4.jpg"> 

      </figure> 
     </div> 

感謝。

Answer 1

ワーキングサンプル：JSFiddle

合計幅が100％であり、高さが自動

であるあなたが#slider

#slider { 
    overflow: hidden; 
    width: 50%; 
} 

Answer 2

（IDはsliderのdiv）の幅を変更する必要があります。これはこのスライドショーのコンテナです。

ほとんどの場合：スライダーdiv要素が配置されている

• 場所は、あなたが使用している
• 画像が難しいことができますいくつかの他のスタイリングに関連する問題、
• 十分な大きさではありません大きくすることはできませんそのページに完全にアクセスすることなく を検出してください。

あなたは、このアプローチで動的ページを作成するためにwan't場合は、常に、画像の数に応じて、キーフレームとfigureの幅を変更する必要があるでしょう。

正しい方向にポイント - より速いアプローチは、bxsliderのようなすぐに使用できるライブラリを使用しています。これは非常によく文書化されています。