Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title></title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width">
- <style>
- body { margin:0; }
- h1 { text-align:center;position:fixed;width:700px;top:100px;left: 50%;
- transform: translate(-50%, 0); }
- img { width:23%;margin:0 0.5%; }
- .main { position:absolute;width:300vw;top:250px;display:inline-block;
- display:flex;flex-direction:row;margin-left:-10px; }
- .A { width:90%;display:inline-block;display:flex;
- justify-content:center; }
- .button { border:20px solid red;display:inline-block;border-radius:50%;
- transform:translate(30px,10px);cursor:pointer; }
- </style>
- <h1>Bootstrap 4 product slider <span onclick='ya()' id='bt' class='button'></span></h1>
- <span id='main' class='main'>
- <span class='A'>
- <img style='padding-left:1.3%;' src='https://wallpaperaccess.com/full/284467.jpg'/>
- <img src='https://wallpapercave.com/wp/5odX9PP.jpg'/>
- <img src='https://wallpaperaccess.com/full/439753.jpg'/>
- <img src='https://wallpaperplay.com/walls/full/1/1/9/318060.jpg'/>
- </span>
- <span class='A'>
- <img style='padding-left:1.3%;' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdJoel9J8JyMoJZkZLyujqIbboOh3K9BTY-GmHOTdQi4MoQW7j&s'/>
- <img src='https://hdqwalls.com/wallpapers/garena-free-fire-2019-ys.jpg'/>
- <img src='https://wallpaperaccess.com/full/865178.jpg'/>
- <img src='http://sfwallpaper.com/images/desktop-full-hd-wallpaper-11.jpg'/>
- </span>
- <span class='A'>
- <img style='padding-left:1.3%;' src='https://thewallpaper.co//wp-content/uploads/2016/03/beautiful-landscape-high-resolution-new-best-pictures-download-free-cool-high-resolution-stock-photos-1920x1080.jpg'/>
- <img src='https://getwall.net/wp-content/uploads/2019/04/1080p-Anime-Background-Free-Download.jpg'/>
- <img src='https://wallpaperaccess.com/full/284469.jpg'/>
- <img src='http://www.tomfornorthdakota.com/wp-content/uploads/2018/11/full-hd-3d-wallpapers-1920x1080-free-download-full-hd-3d-wallpapers-download.jpg'/>
- </span>
- </span>
- <script>
- i=100;
- function ya(){
- main.style.transform='translate('+-i+'vw)';
- i=i+100;
- if(i>300){
- i=0;
- main.style.transform='translate('+i+'vw)';i=i+100;
- }
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement