Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Html gif slider</title>
- <style>
- .bootstrap_box_slider {
- width: 4070px;
- margin-top: 120px;
- }
- body {
- margin: 0;
- }
- img {
- border-radius: 10px;
- }
- #sp1 {
- position: absolute;
- bottom: 20px;
- right: 20px;
- }
- div {
- display: inline-block;
- position: relative;
- border: 5px solid white;
- width: 800px;
- height: 450px;
- }
- .full {
- width: 50px;
- cursor: pointer;
- }
- a {
- top: 10px;
- left: 10px;
- position: absolute;
- text-decoration: none;
- font-size: 20px;
- font-family: verdana;
- color: white;
- background-color: red;
- padding: 5px 20px;
- line-height: 50px;
- }
- </style>
- </head>
- <body>
- <a href='https://www.youtube.com/channel/UCI875fP1d6RdkZje7R-9ieQ'>YouTube Channel</a>
- <div class='bootstrap_box_slider'>
- <div id='one'><img style='width:100%;height:100%;' src='https://1xpto.netlify.app/Gif/gif1.gif' />
- <span onclick='gofull1()' id='sp1'><img class='full' src='https://1xpto.netlify.app/Icons/full.png' /></span>
- </div>
- <div id='two'><img style='width:100%;height:100%;' src='https://1xpto.netlify.app/Gif/gif2.gif' />
- <span onclick='gofull2()' id='sp1'><img class='full' src='https://1xpto.netlify.app/Icons/full.png' /></span>
- </div>
- <div id='three'><img style='width:100%;height:100%;' src='https://1xpto.netlify.app/Gif/gif3.gif' />
- <span onclick='gofull3()' id='sp1'><img class='full' src='https://1xpto.netlify.app/Icons/full.png' /></span>
- </div>
- <div id='four'><img style='width:100%;height:100%;' src='https://1xpto.netlify.app/Gif/gif4.gif' />
- <span onclick='gofull4()' id='sp1'><img class='full' src='https://1xpto.netlify.app/Icons/full.png' /></span>
- </div>
- <div id='five'><img style='width:100%;height:100%;' src='https://1xpto.netlify.app/Gif/gif5.gif' />
- <span onclick='gofull5()' id='sp1'><img class='full' src='https://1xpto.netlify.app/Icons/full.png' /></span>
- </div>
- </div>
- <script>
- function gofull1() {
- one.requestFullscreen();
- }
- function gofull2() {
- two.requestFullscreen();
- }
- function gofull3() {
- three.requestFullscreen();
- }
- function gofull4() {
- four.requestFullscreen();
- }
- function gofull5() {
- five.requestFullscreen();
- }
- </script>
- </body>
- </html>
Add Comment
Please, Sign In to add comment