Bosquejo

resources/views/home/testimonios.blade.php

@@ -0,0 +1,56 @@
+<div id="testimonios">
+  <div class="ui container">
+    <div class="ui center aligned grid">
+      <div class="fourteen wide column" id='testimonio'>
+        <p>
+          <i>
+            {{$testimonios[0]->contenido}}
+          </i>
+        </p>
+        <div class="ui header">
+          {{$testimonios[0]->emisor}}
+        </div>
+      </div>
+    </div>
+    <div class="ui center aligned basic segment" id="marcador">
+      @foreach ($testimonios as $i => $t)
+        <i class="small circle @if ($i > 0)
+          outline
+        @endif icon" data-id="{{$i}}"></i>
+      @endforeach
+    </div>
+  </div>
+</div>
+
+@push('scripts')
+  <script type="text/javascript">
+    var testimonios = [
+      @foreach ($testimonios as $testimonio)
+        {
+          contenido: '{{$testimonio->contenido}}',
+          emisor: '{{$testimonio->emisor}}'
+        },
+      @endforeach
+    ]
+    var current = 0
+    function cambiar(id) {
+      if (id == current) {
+        return
+      }
+      $('#testimonio').html('').append(
+        $('<p></p>').html(testimonios[id].contenido)
+      ).append(
+        $('<div></div>').attr('class', 'ui header').html(testimonios[id].emisor)
+      )
+      $('#marcador').find(".icon[data-id='" + current + "']").addClass('outline')
+      $('#marcador').find(".icon[data-id='" + id + "']").removeClass('outline')
+      current = id
+    }
+    $(document).ready(function() {
+      $('#marcador').find('.icon').css('cursor', 'pointer').click(function() {
+        var id = $(this).attr('data-id')
+        cambiar(id)
+      })
+    })
+  </script>
+@endpush