I.Rayetzki I.Rayetzki - 4 months ago 7
CSS Question

How to cancel sliding down animation and make just static slide

Don't know how to make a static slide , got this sliding down animation.
What should I change?
Maybe I made smth with 'position' property?
Or with positioning in general?
Or my JS sucks....

#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, that it is without comments :(

Answer

You don't want to use the opacity property to hide the image, it will still "occupy the space" and therefore move the elements down,

You'll need to use the display which will simply not draw anything for this element and not allocate any space for it.

In your CSS, replace opacity: 0 in the .slide by display: none

and replace opacity: 1 in the .showing by display: block

It should fix your problem