Se avanza en la pagina de inicio, falta los indicadores

resources/views/home/aviso.blade.php

@@ -0,0 +1,57 @@
+@if (isset($aviso) and $aviso)
+  <div id="aviso">
+    <div class="ui container">
+      <div class="ui center aligned grid">
+        <div class="ten wide column">
+          <div class="ui header">
+            BENEFICIOS COVID 19
+          </div>
+          Bono Pie 10%
+        </div>
+        <div class="row">
+          @foreach ($avisos as $i => $av)
+            <i class="circle outline tiny icon" data-id="{{$i + 1}}"></i>
+          @endforeach
+        </div>
+      </div>
+    </div>
+  </div>
+@endif
+
+@push('scripts')
+  <script type="text/javascript">
+    var avisos = {
+      avisos: [
+        @foreach ($avisos as $av)
+          {
+            titulo: '{{$av->titulo}}',
+            contenido: '{{$av->contenido}}'
+          },
+        @endforeach
+      ],
+      id: '#aviso',
+      curr_page: 1,
+      setup: () => {
+        avisos.movePage(avisos.curr_page)
+      },
+      movePage: (page) => {
+        var aviso = avisos.avisos[page - 1]
+        $(avisos.id).find('.grid .column').html('').append(
+          $('<div></div>').attr('class', 'ui header').html(aviso.titulo)
+        ).append(aviso.contenido)
+        $(avisos.id).find('.circle.icon').addClass('outline').css('cursor', 'pointer').click(function() {
+          var id = $(this).attr('data-id')
+          if (id == avisos.curr_page) {
+            return
+          }
+          avisos.movePage(id)
+        })
+        $(avisos.id).find('.circle.icon:nth-child(' + page + ')').removeClass('outline').css('cursor', 'default')
+        avisos.curr_page = page
+      }
+    }
+    $(document).ready(function() {
+      avisos.setup()
+    })
+  </script>
+@endpush