Marquee de indicadores

resources/views/home/indicadores.blade.php

@@ -1,7 +1,5 @@
 <div id="indicadores">
-  <div class="ui container">
-    <div class="slideshow ui center aligned grid">
-    </div>
+  <div class="marquee slideshow">
   </div>
 </div>
 
@@ -70,6 +68,7 @@
         },
         @endforeach
       ],
+      data: [],
       id: '#indicadores',
       current: {{count($indicadores)}},
       findIndicador: (i) => {
@@ -77,16 +76,22 @@
         return $.ajax({
           url: '{{$urls->base}}/indicador/' + indicador.sim,
           success: (data) => {
-            var div = $('<div></div>').attr('class', 'two wide column slide').append(
-              $('<div></div>').attr('class', 'ui header').attr('data-title', 'Fecha').attr('data-content', data.valor.fecha).append(indicador.titulo).append(
-                $('<div></div>').attr('class', 'sub header').html(data.valor.valor)
-              )
-            )
-            div.find('.header').popup(9)
-            $(indicadores.id).find('.slideshow').append(div)
+            indicadores.data.push(data.valor)
+            indicadores.putIndicador(indicador.titulo, data.valor)
           }
         })
       },
+      putIndicador: (titulo, data) => {
+        var div = $('<div></div>').attr('class', 'slide').append(
+          $('<div></div>').attr('class', 'ui horizontal mini statistic').attr('data-title', 'Fecha').attr('data-content', data.fecha).append(
+            $('<div></div>').attr('class', 'value').html(titulo)
+          ).append(
+            $('<div></div>').attr('class', 'value').html(data.valor)
+          )
+        )
+        div.find('.header').popup(9)
+        $(indicadores.id).find('.slideshow').append(div)
+      },
       setup: () => {
         var promises = []
         promise = null
@@ -95,7 +100,13 @@
           promises.push(promise)
         })
         Promise.all(promises).then(() => {
-          //slideshow.setup()
+          $.each(indicadores.data, (i, el) => {
+            indicadores.putIndicador(indicadores.indicadores[i].titulo, el)
+          })
+          $('.marquee').marquee({
+            duration: 20000,
+            gap: 50
+          })
         })
       }
     }