슬라이드 쇼를 스크롤 할 때 키 프레임이 꺼짐

Question

내 사이트에서 사용하려는 스크롤 슬라이드 쇼 코드를 발견했으나 6 개의 이미지 용으로 설계되었으며 코드를 복사하고 14 개 이미지로 바꿀 때 6 개 이미지 만 스크롤됩니다. 나는 그것이 키 프레임과 관련이 있다고 가정하지만, 수정하는 것에 대해서는 충분히 알지 못합니다. 컨테이너 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 클래스는 모든 이미지를 함께 포함합니다. 각 이미지에는 그 사이에 여백이 있습니다. 약 4px입니다.

그래서 계산됩니다.

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

그래서 우리는 6748px에 photobanner DIV의 폭을 설정할 수 있습니다.

마지막으로 애니메이션을 margin-left으로 설정하면 계산은 다음과 같습니다.

이미지의 각 이미지는 입니다. 또한 마지막 이미지가 끝날 때까지 스크롤을 멈추어야합니다. 따라서 계산이 될 것입니다.

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

다음은 코드의 작동 예제입니다.

Plunkr Demo

귀하의 요구 사항에 따라 코드에 쥐는을 주시기 바랍니다.