<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="slider"> <div class="slider-row"></div> </div>

.slider { position: absolute; width: 100%; top: calc(50% - 97.25px); overflow: hidden; } .slider .slider-row { width: 2956px; height: 194.5px; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/111863/ubiquity-summit-web-01.png); background-size: 2956px 194.5px; -webkit-animation: slide 50s linear infinite; animation: slide 50s linear infinite; } @-webkit-keyframes slide { from { background-position-x: 0; } to { background-position-x: -2956px; } } @keyframes slide { from { background-position-x: 0; } to { background-position-x: -2956px; } }