Bosquejo

resources/views/home/clientes.blade.php

@@ -0,0 +1,81 @@
+<div class="ui container" id="clientes">
+  <div class="ui center aligned large header">
+    CLIENTES
+  </div>
+  <div class="ui grid">
+    <div class="column ci">
+      <i class="left chevron big icon" id="left_arrow"></i>
+    </div>
+    <div class="fourteen wide column">
+      <div class="ui center aligned stackable grid" id="img_clientes">
+        <div class="row">
+          @for ($i = 0; $i < min(10, count($clientes)); $i += 2)
+            <div class="three wide column">
+              {!!$clientes[$i]!!}
+            </div>
+          @endfor
+        </div>
+        <div class="row">
+          @for ($i = 1; $i < min(10, count($clientes)); $i += 2)
+            <div class="three wide column">
+              {!!$clientes[$i]!!}
+            </div>
+          @endfor
+        </div>
+      </div>
+    </div>
+    <div class="column ci">
+      <i class="right chevron big icon" id="right_arrow"></i>
+    </div>
+  </div>
+</div>
+
+@push('scripts')
+  <script type="text/javascript">
+    var clientes = [
+      @foreach ($clientes as $cliente)
+        '{!!$cliente!!}',
+      @endforeach
+    ]
+    var current = 0
+    function decreaseClientes() {
+      $('#img_clientes').find('.row').find('.column:last-child').remove()
+      current -= 2
+      if (current < -8) {
+        current = clientes.length - 10
+      }
+      n = current
+      if (n < 0) {
+        n = clientes.length + n
+      }
+      $('#img_clientes').find('.row:first-child').prepend(
+        $('<div></div>').attr('class', 'three wide column').append(clientes[n])
+      )
+      $('#img_clientes').find('.row:last-child').prepend(
+        $('<div></div>').attr('class', 'three wide column').append(clientes[n + 1])
+      )
+    }
+    function increaseClientes() {
+      $('#img_clientes').find('.row').find('.column:first-child').remove()
+      current += 2
+      if (current > clientes.length - 10) {
+        current = -8
+      }
+      $('#img_clientes').find('.row:first-child').append(
+        $('<div></div>').attr('class', 'three wide column').append(clientes[current + 8])
+      )
+      $('#img_clientes').find('.row:last-child').append(
+        $('<div></div>').attr('class', 'three wide column').append(clientes[current + 9])
+      )
+    }
+    $(document).ready(function() {
+      $('.ci .icon').css('cursor', 'pointer').click(function() {
+        if ($(this).attr('class').indexOf('left') != -1) {
+          decreaseClientes()
+          return
+        }
+        increaseClientes()
+      })
+    })
+  </script>
+@endpush