Bootstrap Slider

<!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>