carrusel-home.component.html 2.0 KB

123456789101112131415161718192021222324252627282930313233343536
  1. <section class="slide">
  2. <div class="slide-inner">
  3. <input class="slide-open" type="radio" id="slide-1" name="slide" aria-hidden="true" hidden="" checked="checked">
  4. <div class="slide-item">
  5. <div id="titulo">
  6. <h1>EQUIPOS PARA PLANTAS INDUSTRIALES, BODEGAS Y ALMACENES</h1>
  7. <button>VER MÁS</button>
  8. </div>
  9. <img [src]="'assets/img/base1.jpg'">
  10. </div>
  11. <input class="slide-open" type="radio" id="slide-2" name="slide" aria-hidden="true" hidden="">
  12. <div class="slide-item">
  13. <div id="titulo">
  14. <h1>EQUIPOS PARA INDUSTRIA GANADERA</h1>
  15. <button>VER MÁS</button>
  16. </div>
  17. <img [src]="'assets/img/base-3.jpg'">
  18. </div>
  19. <input class="slide-open" type="radio" id="slide-3" name="slide" aria-hidden="true" hidden="">
  20. <div class="slide-item">
  21. <div id="titulo">
  22. <h1>EQUIPOS PARA INVERNADEROS</h1>
  23. <button>VER MÁS</button>
  24. </div>
  25. <img [src]="'assets/img/base-4.jpg'">
  26. </div>
  27. <label for="slide-3" class="slide-control prev control-1"><mat-icon style="transform: scale(2);">arrow_back_ios</mat-icon></label>
  28. <label for="slide-2" class="slide-control next control-1"><mat-icon style="transform: scale(2);">arrow_forward_ios</mat-icon></label>
  29. <label for="slide-1" class="slide-control prev control-2"><mat-icon style="transform: scale(2);">arrow_back_ios</mat-icon></label>
  30. <label for="slide-3" class="slide-control next control-2"><mat-icon style="transform: scale(2);">arrow_forward_ios</mat-icon></label>
  31. <label for="slide-2" class="slide-control prev control-3"><mat-icon style="transform: scale(2);">arrow_back_ios</mat-icon></label>
  32. <label for="slide-1" class="slide-control next control-3"><mat-icon style="transform: scale(2);">arrow_forward_ios</mat-icon></label>
  33. </div>
  34. </section>