Commit 099c7c0baa2833564426e9a695b4d8d8bef1b519
1 parent
da27feb175
Exists in
master
Cambiado carousel.
Showing
5 changed files
with
56 additions
and
38 deletions
Show diff stats
src/app/app.module.ts
| ... | ... | @@ -6,6 +6,7 @@ import { HttpClientModule } from '@angular/common/http'; |
| 6 | 6 | import { FormsModule, ReactiveFormsModule } from '@angular/forms'; |
| 7 | 7 | import { TooltipModule } from 'ngx-bootstrap/tooltip'; |
| 8 | 8 | import { PopoverModule } from 'ngx-bootstrap/popover'; |
| 9 | +import { CarouselModule } from 'ngx-bootstrap/carousel'; | |
| 9 | 10 | //#endregion |
| 10 | 11 | |
| 11 | 12 | //#region Keyboard |
| ... | ... | @@ -59,7 +60,8 @@ import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final. |
| 59 | 60 | PopoverModule.forRoot(), |
| 60 | 61 | BrowserAnimationsModule, |
| 61 | 62 | MatKeyboardModule, |
| 62 | - MatButtonModule | |
| 63 | + MatButtonModule, | |
| 64 | + CarouselModule.forRoot() | |
| 63 | 65 | ], |
| 64 | 66 | providers: [], |
| 65 | 67 | bootstrap: [AppComponent] |
src/app/components/home/home.component.html
| ... | ... | @@ -18,26 +18,24 @@ |
| 18 | 18 | <!-- INFO DE BIENVENIDA --> |
| 19 | 19 | <div class="row my-auto h-50 w-100"> |
| 20 | 20 | <div class="col-3 col-lg-4 offset-lg-1 h-100 my-auto"> |
| 21 | - | |
| 22 | - <div id="carouselExampleSlidesOnly" class="carousel slide h-100" data-ride="carousel"> | |
| 23 | - <div class="carousel-inner h-100"> | |
| 24 | - <div class="carousel-item active h-100"> | |
| 25 | - <img | |
| 26 | - src="{{apiUrl}}/imagenes/coca1.jpg" | |
| 27 | - class="d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto"> | |
| 28 | - </div> | |
| 29 | - <div class="carousel-item h-100"> | |
| 30 | - <img | |
| 31 | - src="{{apiUrl}}/imagenes/coca2.jpg" | |
| 32 | - class="d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto"> | |
| 33 | - </div> | |
| 34 | - <div class="carousel-item h-100"> | |
| 35 | - <img | |
| 36 | - src="{{apiUrl}}/imagenes/coca3.jpg" | |
| 37 | - class="d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto"> | |
| 38 | - </div> | |
| 39 | - </div> | |
| 40 | - </div> | |
| 21 | + <!-- CAROUSEL --> | |
| 22 | + <carousel [showIndicators]="false" [interval]="1500"> | |
| 23 | + <slide class="h-100"> | |
| 24 | + <img | |
| 25 | + src="{{apiUrl}}/imagenes/coca1.jpg" | |
| 26 | + class="fade-in d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto"> | |
| 27 | + </slide> | |
| 28 | + <slide class="h-100"> | |
| 29 | + <img | |
| 30 | + src="{{apiUrl}}/imagenes/coca2.jpg" | |
| 31 | + class="fade-in d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto"> | |
| 32 | + </slide> | |
| 33 | + <slide class="h-100"> | |
| 34 | + <img | |
| 35 | + src="{{apiUrl}}/imagenes/coca3.jpg" | |
| 36 | + class="fade-in d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto"> | |
| 37 | + </slide> | |
| 38 | + </carousel> | |
| 41 | 39 | |
| 42 | 40 | </div> |
| 43 | 41 | <div class="col-9 col-lg-7 text-center text-white my-auto"> |
src/app/components/inicio/inicio.component.html
| ... | ... | @@ -26,22 +26,29 @@ |
| 26 | 26 | </div> |
| 27 | 27 | <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p> |
| 28 | 28 | </div> |
| 29 | - <div id="carouselIndicators" class="carousel slide" data-ride="carousel"> | |
| 30 | - <div class="carousel-inner"> | |
| 31 | - <div class="carousel-item active"> | |
| 32 | - <img src="{{apiUrl}}/imagenes/beldent.jpg" class="d-block w-75 m-auto rounded"> | |
| 33 | - </div> | |
| 34 | - <div class="carousel-item"> | |
| 35 | - <img src="{{apiUrl}}/imagenes/cafe con leche y medialunas.jpg" class="d-block w-75 m-auto rounded"> | |
| 36 | - </div> | |
| 37 | - <div class="carousel-item"> | |
| 38 | - <img src="{{apiUrl}}/imagenes/Surtido bagley.jpg" class="d-block w-75 m-auto rounded"> | |
| 39 | - </div> | |
| 40 | - <div class="carousel-item"> | |
| 41 | - <img src="{{apiUrl}}/imagenes/yogurisimo.jpg" class="d-block w-75 m-auto rounded"> | |
| 42 | - </div> | |
| 43 | - </div> | |
| 44 | - </div> | |
| 29 | + <!-- CAROUSEL --> | |
| 30 | + <carousel [showIndicators]="false" [interval]="1500"> | |
| 31 | + <slide class="h-100"> | |
| 32 | + <img | |
| 33 | + src="{{apiUrl}}/imagenes/beldent.jpg" | |
| 34 | + class="fade-in d-block w-75 m-auto rounded"> | |
| 35 | + </slide> | |
| 36 | + <slide class="h-100"> | |
| 37 | + <img | |
| 38 | + src="{{apiUrl}}/imagenes/cafe con leche y medialunas.jpg" | |
| 39 | + class="fade-in d-block w-75 m-auto rounded"> | |
| 40 | + </slide> | |
| 41 | + <slide class="h-100"> | |
| 42 | + <img | |
| 43 | + src="{{apiUrl}}/imagenes/Surtido bagley.jpg" | |
| 44 | + class="fade-in d-block w-75 m-auto rounded"> | |
| 45 | + </slide> | |
| 46 | + <slide class="h-100"> | |
| 47 | + <img | |
| 48 | + src="{{apiUrl}}/imagenes/yogurisimo.jpg" | |
| 49 | + class="fade-in d-block w-75 m-auto rounded"> | |
| 50 | + </slide> | |
| 51 | + </carousel> | |
| 45 | 52 | </div> |
| 46 | 53 | |
| 47 | 54 | <!-- ORDENAR --> |
src/app/components/sidebar/sidebar.component.html
| ... | ... | @@ -33,7 +33,7 @@ |
| 33 | 33 | (click)="aumentarCantidad(producto)"> |
| 34 | 34 | <i class="fa fa-plus" aria-hidden="true"></i> |
| 35 | 35 | </button> |
| 36 | - <div class="bg-white border border-white px-3 my-auto text-dark h5 shadow"> | |
| 36 | + <div class="bg-white border border-white px-2 my-auto text-dark h5 shadow"> | |
| 37 | 37 | <small>{{producto.cantidad}}</small> |
| 38 | 38 | </div> |
| 39 | 39 | <button |
src/assets/scss/bootstrap-override.scss
| ... | ... | @@ -68,4 +68,15 @@ $theme-colors: ( |
| 68 | 68 | } |
| 69 | 69 | } |
| 70 | 70 | |
| 71 | +.carousel-control { | |
| 72 | + visibility: hidden !important; | |
| 73 | +} | |
| 74 | + | |
| 75 | +.carousel, .carousel-inner, .item { | |
| 76 | + height: 100% !important; | |
| 77 | + &:focus{ | |
| 78 | + outline: none !important; | |
| 79 | + } | |
| 80 | +} | |
| 81 | + | |
| 71 | 82 | @import "../../../node_modules/bootstrap/scss/bootstrap"; |