スクロールスライドショーでキーフレームがオフになる

Question

私は自分のサイトで使いたいスクロールスライドショーのコードを見つけましたが、6枚の画像用に設計されていて、コードをコピーして14枚の画像に置き換えたとき、私はそれがキーフレームと何か関係があると思っていますが、修正するには十分に分かりません。コンテナIDの幅を1000pxから500pxに変更しました。また、スクロールの下に表示される画像で面白いことが起きています。誰かが14イメージをスクロールしてシームレスに取得する方法を教えてもらえれば、とても感謝しています。ありがとう。

html { 
 
    background-color: white; 
 
} 
 

 
body { 
 
    width: 1300px; 
 
    margin: 0 auto 0; 
 
} 
 

 
#container { 
 
    width: 500px; 
 
    overflow: hidden; 
 
    margin: 50px auto; 
 
    background: white; 
 
} 
 

 
.photobanner { 
 
    height: 233px; 
 
    width: 3550px; 
 
    margin-bottom: 80px; 
 
} 
 

 
.first { 
 
    -webkit-animation: bannermove 30s linear infinite; 
 
    -moz-animation: bannermove 30s linear infinite; 
 
    -ms-animation: bannermove 30s linear infinite; 
 
    -o-animation: bannermove 30s linear infinite; 
 
    animation: bannermove 30s linear infinite; 
 
} 
 

 
@keyframes "bannermove" { 
 
    0% { 
 
    margin-left: 0px; 
 
    } 
 
    100% { 
 
    margin-left: -2125px; 
 
    } 
 
} 
 

 
@-moz-keyframes bannermove { 
 
    0% { 
 
    margin-left: 0px; 
 
    } 
 
    100% { 
 
    margin-left: -2125px; 
 
    } 
 
} 
 

 
@-webkit-keyframes "bannermove" { 
 
    0% { 
 
    margin-left: 0px; 
 
    } 
 
    100% { 
 
    margin-left: -2125px; 
 
    } 
 
} 
 

 
@-ms-keyframes "bannermove" { 
 
    0% { 
 
    margin-left: 0px; 
 
    } 
 
    100% { 
 
    margin-left: -2125px; 
 
    } 
 
} 
 

 
@-o-keyframes "bannermove" { 
 
    0% { 
 
    margin-left: 0px; 
 
    } 
 
    100% { 
 
    margin-left: -2125px; 
 
    } 
 
}

<section class="flex-container"> 
 
    <div id="container"> 
 
    <!-- Each image is 480px by 270px --> 
 
    <div class="photobanner"> 
 
     <img class="first" src="https://www.bartonlewis.com/_imagesfilm/scroll_blue.jpg" alt="blue" /> 
 
     <img src="https://www.bartonlewis.com/_imagesfilm/scroll_23rd_st.jpg" alt="23rd st" /> 
 
     <img src="https://www.bartonlewis.com/_imagesfilm/scroll_broken_guru.jpg" alt="broken guru" /> 
 
     <img src="https://www.bartonlewis.com/_imagesfilm/scroll_church_ave.jpg" alt="church ave" /> 
 
     <img src="https://www.bartonlewis.com/_imagesfilm/scroll_nose.jpg" alt="nose" /> 
 
     <img src="https://www.bartonlewis.com/_imagesfilm/scroll_pants.jpg" alt="pants" /> 
 
     <img src="https://www.bartonlewis.com/_imagesfilm/scroll_i_will_miss_you.jpg" alt="i will miss you" /> 
 
     <img src="https://www.bartonlewis.com/_imagesfilm/scroll_network_reality_all_stars.jpg" alt="network reality all stars" /> 
 
     <img src="https://www.bartonlewis.com/_imagesfilm/scroll_kline.jpg" alt="kline" /> 
 
     <img src="https://www.bartonlewis.com/_imagesfilm/scroll_queen.jpg" alt="queen" /> 
 
     <img src="https://www.bartonlewis.com/_imagesfilm/scroll_water.jpg" alt="water" /></div> 
 
    <img src="https://www.bartonlewis.com/_imagesfilm/scroll_swirls.jpg" alt="swirls" /> 
 
    <img src="https://www.bartonlewis.com/_imagesfilm/scroll_robins_egg.jpg" alt="robins egg" /> 
 
    <img src="https://www.bartonlewis.com/_imagesfilm/scroll_ports.jpg" alt="ports" /> 
 
    </div> 
 
</section>

Answer 1

あなたの上記のコードから、計算が私たちはあなたの条件のための14枚の画像に合わせて、これを調整する必要がミスマッチしていることは明らかです。

最初の問題は、クラスphotobannerのdivは画像と同じ高さではなかったため、画像の高さと同じ高さを270pxに修正しました。また、デフォルトでは画像間にスペースがありますが、これを修正するには、CSSプロパティ（font-size:0px）で親画像を設定する必要があり、画像間のスペースが問題になるためスペースがなくなります。余白（margin-right:2px）を使用する間にスペースを追加しています。

.photobanner { 
    height: 270px; 
    width: max-content; 
    margin-bottom: 80px; 
    font-size:0px; 
} 

img{ 
    margin-right:2px; 
} 

各画像には寸法があります。 （幅：480px、高さ：270px）

したがって、クラスphotobannerのdivにはすべての画像が一緒に含まれています。各画像には、その間に余白があります。 4pxくらいです

したがって、計算されます。

total width = (width of image * 14) + (margin * 14) 
    6748  = (  480  * 14) + ( 2 * 14) 

だから我々は6748pxにphotobanner div要素の幅を設定することができます。

最後に、アニメーションmargin-leftを設定します。計算は次のとおりです。

イメージはそれぞれ、が約2です。また、最後のイメージがスクロールしてコンテナの右側に来るのを止める必要があります。したがって計算が行われます。

margin-right = (width of image * 13) + (margin * 14) 
    6268  = (  480  * 13) + ( 2 * 14) 

以下はコードの実際の例です。

Plunkr Demo

あなたの要件に応じてコードに微調整を加えること自由に感じなさい。