Merge pull request #6655 from IgniteUI/mpopov/carousel/6518

fix(carousel): adding min width and height

Author: zdrawku

projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss

@@ -303,6 +303,8 @@
         overflow: hidden;
         outline-style: none;
         border-radius: --var($theme, 'border-radius');
+        min-height: 300px;
+        min-width: 300px;
     }
 
     %igx-carousel-slide {

src/app/carousel/carousel.sample.html

@@ -49,7 +49,30 @@ <h4 class="sample-title">Desktop</h4>
                         </ng-template> -->
                     </igx-carousel>
                 </div>
+
+                <igx-carousel class="mt30" #car [interval]="interval" [pause]="pause" [loop]="loop">
+                    <igx-slide *ngFor="let slide of slides;" [active]="slide.active">
+                        <img [src]="slide.image">
+                    </igx-slide>
+
+                    <ng-template igxCarouselIndicator let-slide>
+                        <img *ngIf="!slide.active" [src]="slides[slide.index].image" style="width: 100px;  ">
+                        <img *ngIf="slide.active" [src]="slides[slide.index].image" style="width: 120px;  ">
+                    </ng-template>
+
+                    <!-- <ng-template igxCarouselNextButton let-disabled>
+                            <button igxButton="fab" igxRipple="white" [disabled]="disabled">
+                                    <igx-icon fontSet="material">add</igx-icon>
+                                </button>
+                    </ng-template>
+
+                    <ng-template igxCarouselPrevButton let-disabled>
+                            <button igxButton="fab" igxRipple="white" [disabled]="disabled">
+                                    <igx-icon fontSet="material">remove</igx-icon>
+                                </button>
+                    </ng-template> -->
+                </igx-carousel>
             </article>
         </section>
     </div>
-</div>
+</div>

src/app/carousel/carousel.sample.scss

@@ -0,0 +1,3 @@
+.mt30 {
+    margin-top: 30px;
+}

src/app/carousel/carousel.sample.ts

@@ -3,6 +3,7 @@ import { IgxCarouselComponent, CarouselIndicatorsOrientation } from 'igniteui-an
 
 @Component({
     selector: 'app-carousel-sample',
+    styleUrls: ['carousel.sample.scss'],
     templateUrl: 'carousel.sample.html'
 })
 export class CarouselSampleComponent {