"Slider Without Bootstrap"
Bootstrap 4.1.1 Snippet by KelvinMacwan

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head runat="server"> <title>Images Slider Without Bootstrap</title> </head> <body> <form id="form1" runat="server"> <div class ="wrapper"> <figure> <img src="https://wallpapercave.com/wp/nsu3cSp.jpg" alt="wall1" /> <img src="https://wallpapercave.com/wp/Rz6VFJP.jpg" alt="Wall2" /> <img src="http://eskipaper.com/images/free-nature-backgrounds-1.jpg" alt="wall3" /> <img src="http://s1.picswalls.com/wallpapers/2017/12/11/nature-backgrounds_123026774_313.jpg" alt="wall4" /> <img src="https://wallpapercave.com/wp/nsu3cSp.jpg" alt="wall5" /> </figure> </div> </form> </body> </html>
.wrapper { height :400px; width :800px; border:double 5px black; overflow:hidden; } figure { height :300px; width :500%; position:relative ; margin :0px; left :0px; animation:ss 10s infinite; } img { width:20%; height :400px; float:left ; } @keyframes ss { 0%{left:0%;} 11%{left:0%;} 22%{left:-100%;} 33%{left:-100%;} 44%{left:-200%;} 55%{left:-200%;} 66%{left:-300%;} 77%{left:-300%;} 88%{left:-400%;} 100%{left:-400%;} }

Related: See More

Material Kit Pro
Client or Partners Logo Slider
Timely Login slider
tabbed macbook mockup slider

Questions / Comments: