Wie Sie die nach unten rutschen Animation und machen nur statische Folie

Question

Ich weiß nicht, wie man eine statische Folie, habe diese Rutschen Animation. Was soll ich ändern? Vielleicht habe ich etw mit 'position'-Eigenschaft gemacht? Oder mit Positionierung im Allgemeinen? Oder mein JS saugt ....

 #slides { 
     position: relative; 
     height: 500px; 
     padding: 0px; 
     margin: 0px; 
     list-style-type: none; 
    } 

    .slide { 
     width: 600px; 
     height: 500px; 
     margin-top: 0px; 
     margin-left: 500px; 
     opacity: 0; 
     z-index: 1; 
     -webkit-transition: opacity 1s; 
     -moz-transition: opacity 1s; 
     -o-transition: opacity 1s; 
     transition: opacity 1s; 
    } 

    .showing { 
     opacity: 1; 
     z-index: 2; 
    } 

    .controls { 
     display: none; 
    } 

    .slide { 
     font-size: 40px; 
     padding: 70px; 
     box-sizing: border-box; 
     background: #333; 
     color: #fff; 
     background-size: cover; 
    } 

    .controls { 
     background: #333; 
     color: #fff; 
     border: none; 
     padding: 20px 0px; 
     font-size: 20px; 
     cursor: pointer; 
     border: 2px solid #fff; 
     margin: 10px 0px 0px 10px; 
     display: flex; 
     justify-content: center; 
     align-items: center; 
     width: 70px; 
     position: relative; 
     left: 38%; 
     margin-top: 25px; 
     } 

    .controls:hover, 
    .controls:focus { 
     background: #eee; 
     color: #333; 
    } 

    .buttons { 
     position: absolute; 
     left: 0px; 
     top: 0px; 
     z-index: 20; 
     font-size: 0px; 
    } 

    .controls:nth-of-type(2), .controls:nth-of-type(3) { 
     width: 9%; 
    } 

    // Some JS 
    var controls = document.querySelectorAll('.controls'); 
    for(var i=0; i<controls.length; i++){ 
    controls[i].style.display = 'inline-block'; 
    } 

    var slides = document.querySelectorAll('#slides .slide'); 
    var currentSlide = 0; 
    var slideInterval = setInterval(nextSlide,2000); 

    function nextSlide(){ 
    goToSlide(currentSlide+1); 
    } 

    function previousSlide(){ 
    goToSlide(currentSlide-1); 
    } 

    function goToSlide(n){ 
    slides[currentSlide].className = 'slide'; 
    currentSlide = (n+slides.length)%slides.length; 
    slides[currentSlide].className = 'slide showing'; 
    } 


    var playing = true; 
    var pauseButton = document.getElementById('pause'); 

    function pauseSlideshow(){ 
    pauseButton.innerHTML = '&#9658;'; // play character 
    playing = false; 
    clearInterval(slideInterval); 
    } 

    function playSlideshow(){ 
    pauseButton.innerHTML = '&#10074;&#10074;'; // pause character 
    playing = true; 
    slideInterval = setInterval(nextSlide,2000); 
    } 

    pauseButton.onclick = function(){ 
    if(playing){ pauseSlideshow(); } 
    else{ playSlideshow(); } 
    }; 

var next = document.getElementById('next'); 
var previous = document.getElementById('previous'); 

next.onclick = function(){ 
    pauseSlideshow(); 
    nextSlide(); 
}; 
previous.onclick = function(){ 
    pauseSlideshow(); 
    previousSlide(); 
}; 

Sorry, dass es ohne Kommentare ist :(

Answer 1

Sie wollen nicht die opacity Eigenschaft verwenden, um das Bild zu verstecken, wird es noch „besetzen die Raum“und damit die Elemente nach unten bewegen,

Sie werden die display die etwas ziehen einfach nicht für dieses Element verwenden müssen und keinen Platz für sie zuordnen.

In Ihrem CSS, ersetzen opacity: 0 in der .slide von display: none

und ersetzen opacity: 1 im .showing von display: block

Es sollte Ihr Problem