Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement