JSFiddle - React, Tailwind, and code Playground

infinite BG css carousel

by Andrew Pougher

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div class="scrn"></div>
<div class="info">{{caption || 'loading'}}</div>
<section>
<div class="container-fluid">
<div class="row">


<div ng-repeat="advert in rollacoaster">

<!-- // -->
<div id="{{advert.id}}" style="height:150px;width:100%;" ng-style="{'background-color':advert.col}">
  <div id="{{advert.dir}}" style="height:150px; width:100%;" ng-style="{'background-image':advert.im}">
  </div>
</div>
<!-- // -->
</div>
</div>
</div>
</section>

CSS

@import url(https://fonts.googleapis.com/css?family=Roboto:100,200,300,400|Domine:400|Montserrat:700);
 .scrn {
   height: 100%;
   width: 100%;
   position: fixed;
   left: 0;
   top: 0;
   z-index: 9000 !important;
   background-color: rgba(0, 0, 0, 0.6);
 }
 
 .info {
   font-size: 4rem;
   font-family: Montserrat;
   position: absolute;
   color: white;
   z-index: 9001;
   width: 100%;
   text-align: center;
   top: 40%;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.60);
 }
 
#stream {
   /*background-image: url('https://placehold.it/150x150/33eee/ffffff/&text=PRODUCT');*/
   background-repeat: repeat-x;
   background-position: left bottom;
   background-size:contain;
   -webkit-animation: slide 5500ms linear infinite;
 }
 
 @-webkit-keyframes slide {
   from {
     background-position: 0 0;
   }
   to {
     background-position: 100% 0%;
   }
 }
 
 @-moz-keyframes slide {
   from {
     background-position: 100% 0;
   }
   to {
     background-position: 100% 100%;
   }
 }
 
#stream1 {
   background-image: url('https://placehold.it/150x150/33eee/222222/&text=PRODUCT');
   background-repeat: repeat-x;
   background-position: 0% 100%;
   -webkit-animation: slide1 6500ms linear infinite;
 }
 
 @-webkit-keyframes slide1 {
   from {
     background-position: right bottom;
   }
   to {
     background-position: 0% 100%;
   }
 }
 
 @-moz-keyframes slide1 {
   from {
     background-position: right bottom;
   }
   to {
     background-position: 0% 100%;
   }
 }

JavaScript

var app = angular.module("andrew", []);

app.run(function($rootScope) {
  $rootScope.caption=("COMING SOON")
});

app.controller('Cntrl', function($scope, $http) {
 
  $scope.rollacoaster = [{
    "id": 1,
		"dir": 'stream',
    "col": 'orange',
    "im" : 'url("\http://67.media.tumblr.com/194200e76e45d3a7630b33400467fb10/tumblr_o1z0qlOG8x1tvjjruo1_1280.jpg"\)'
  },{
    "id": 2,
		"dir": 'stream1',
    "col": '#bb0058',
    "im" : 'url("\https://placehold.it/150x150/33eee/ffffff/&text=PRODUCT"\)'
  },{
    "id": 3,
		"dir": 'stream',
    "col": 'blue',
    "im" : 'url("\https://placehold.it/150x150/33eee/ffffff/&text=BRUSH"\)'
  },{
    "id": 4,
		"dir": 'stream1',
    "col": '#ecd453',
    "im" : 'url("\https://placehold.it/150x150/33eee/ffffff/&text=Mirror"\)'
  }];


});








 	/* http://bit.ly/ARP71 */
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-4809804-1', 'auto');
  ga('send', 'pageview');