API tools faq
paste
1xptolevitico69

Html gif slider

1xptolevitico69
Dec 11th, 2021 (edited)
331
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.68 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Html gif slider</title>
  9.  
  10.   <style>
  11.     .bootstrap_box_slider {
  12.       width: 4070px;
  13.       margin-top: 120px;
  14.     }
  15.  
  16.     body {
  17.       margin: 0;
  18.     }
  19.  
  20.     img {
  21.       border-radius: 10px;
  22.     }
  23.  
  24.     #sp1 {
  25.       position: absolute;
  26.       bottom: 20px;
  27.       right: 20px;
  28.     }
  29.  
  30.     div {
  31.       display: inline-block;
  32.       position: relative;
  33.       border: 5px solid white;
  34.       width: 800px;
  35.       height: 450px;
  36.     }
  37.  
  38.     .full {
  39.       width: 50px;
  40.       cursor: pointer;
  41.     }
  42.  
  43.           a {
  44.       top: 10px;
  45.       left: 10px;
  46.       position: absolute;
  47.       text-decoration: none;
  48.       font-size: 20px;
  49.       font-family: verdana;
  50.       color: white;
  51.       background-color: red;
  52.       padding: 5px 20px;
  53.       line-height: 50px;
  54.     }
  55.  
  56.  
  57.   </style>
  58. </head>
  59.  
  60. <body>
  61.  
  62.     <a href='https://www.youtube.com/channel/UCI875fP1d6RdkZje7R-9ieQ'>YouTube Channel</a>
  63.  
  64.   <div class='bootstrap_box_slider'>
  65.  
  66.     <div id='one'><img style='width:100%;height:100%;' src='https://1xpto.netlify.app/Gif/gif1.gif' />
  67.       <span onclick='gofull1()' id='sp1'><img class='full' src='https://1xpto.netlify.app/Icons/full.png' /></span>
  68.     </div>
  69.  
  70.     <div id='two'><img style='width:100%;height:100%;' src='https://1xpto.netlify.app/Gif/gif2.gif' />
  71.       <span onclick='gofull2()' id='sp1'><img class='full' src='https://1xpto.netlify.app/Icons/full.png' /></span>
  72.     </div>
  73.  
  74.     <div id='three'><img style='width:100%;height:100%;' src='https://1xpto.netlify.app/Gif/gif3.gif' />
  75.       <span onclick='gofull3()' id='sp1'><img class='full' src='https://1xpto.netlify.app/Icons/full.png' /></span>
  76.     </div>
  77.  
  78.     <div id='four'><img style='width:100%;height:100%;' src='https://1xpto.netlify.app/Gif/gif4.gif' />
  79.       <span onclick='gofull4()' id='sp1'><img class='full' src='https://1xpto.netlify.app/Icons/full.png' /></span>
  80.     </div>
  81.  
  82.     <div id='five'><img style='width:100%;height:100%;' src='https://1xpto.netlify.app/Gif/gif5.gif' />
  83.       <span onclick='gofull5()' id='sp1'><img class='full' src='https://1xpto.netlify.app/Icons/full.png' /></span>
  84.     </div>
  85.  
  86.   </div>
  87.  
  88.   <script>
  89.     function gofull1() {
  90.       one.requestFullscreen();
  91.     }
  92.  
  93.     function gofull2() {
  94.       two.requestFullscreen();
  95.     }
  96.  
  97.     function gofull3() {
  98.       three.requestFullscreen();
  99.     }
  100.  
  101.     function gofull4() {
  102.       four.requestFullscreen();
  103.     }
  104.  
  105.     function gofull5() {
  106.       five.requestFullscreen();
  107.     }
  108.   </script>
  109. </body>
  110.  
  111. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!