Slider

<!DOCTYPE html>
<html lang=en>
<head>
<title>Slider</title>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width">
<style>

body {  margin:-17px 0;display:block;  }

.web1 {  display:flex;flex-direction:row;   }

.image {  padding:0 1px;  height:100vh;  }

.reminder {  top:10px;left:10px;width:350px;background-color:white;
padding:5px;border-radius:5px;position:fixed;display:none;z-index:1;   }

button { border:15px solid white;border-radius:50%;position:fixed;
right:10px;top:10px;padding:0;outline:none;z-index:1;cursor:pointer;  }

.web2 {  display:flex;flex-direction:row;position:absolute;top:-1000px;   }

.imag {  padding:0 1px; width:70%; height:100vh;  }

</style>
</head>
<body>

<div id='div' class='reminder'>
Images were set according their original aspect ratio. That's why we only set the height.
If we set dimensions like width/height <a onclick='down()' href='#'>( images allow that )</a> some images will get some distortion.
</div>
<button onclick='bt()'></button>

<div id='web1' class='web1'>
<img class='image' src='https://images.pexels.com/photos/1592384/pexels-photo-1592384.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'/>
<img class='image' src='https://images.pexels.com/photos/3138903/pexels-photo-3138903.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'/>
<img class='image' src='https://images.pexels.com/photos/2198544/pexels-photo-2198544.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'/>
<img class='image' src='https://images.pexels.com/photos/2115984/pexels-photo-2115984.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'/>
<img class='image' src='https://images.pexels.com/photos/134392/pexels-photo-134392.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'/>
<img class='image' src='https://images.pexels.com/photos/40831/glass-a-bottle-of-simplicity-studio-40831.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'/>
<img class='image' src='https://images.pexels.com/photos/63249/stefan-bradl-motogp-racing-racing-bike-63249.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'/>
<img class='image' src='https://images.pexels.com/photos/33689/ship-boat-lake-garda-italy.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'/>
</div>


<div id='web2' class='web2'>
<img class='imag' src='https://images.pexels.com/photos/1592384/pexels-photo-1592384.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'/>
<img class='imag' src='https://images.pexels.com/photos/3138903/pexels-photo-3138903.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'/>
<img class='imag' src='https://images.pexels.com/photos/2198544/pexels-photo-2198544.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'/>
<img class='imag' src='https://images.pexels.com/photos/2115984/pexels-photo-2115984.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'/>
<img class='imag' src='https://images.pexels.com/photos/134392/pexels-photo-134392.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'/>
<img class='imag' src='https://images.pexels.com/photos/40831/glass-a-bottle-of-simplicity-studio-40831.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'/>
<img class='imag' src='https://images.pexels.com/photos/63249/stefan-bradl-motogp-racing-racing-bike-63249.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'/>
<img class='imag' src='https://images.pexels.com/photos/33689/ship-boat-lake-garda-italy.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'/>
</div>


<script>
i=0;c=0;

function bt(){
if(i==0){
div.style.display='block';
i=1;
}else if(i==1){
div.style.display='none';
i=0;
}
}

function down(){
if(c==0){
web1.setAttribute('style','position:absolute;top:-1000px;');
web2.setAttribute('style','top:-17px;');
c=1;
}else if(c==1){
web2.setAttribute('style','top:-1000px;');
web1.setAttribute('style','position:absolute;top:-17px;');
c=0;
}
}

</script>
</body>
</html>