feat(carousel): add styling & tailwind sample

live-editing/configs/CarouselConfigGenerator.ts

@@ -41,6 +41,13 @@ export class CarouselConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/layouts/carousel/"
         }));
 
+        configs.push(new Config({
+            component: 'CarouselStylingSampleComponent',
+            additionalFiles: ["/src/app/layouts/carousel/carousel-styling-sample/layout.scss"],
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/layouts/carousel/"
+        }));
+
         return configs;
     }
 }

src/app/layouts/carousel/carousel-styling-sample/carousel-styling-sample.component.html

@@ -0,0 +1,19 @@
+<div class="carousel-container">
+    <igx-carousel>
+        <igx-slide>
+            <div class="slide-content-wrapper">
+                <img src="assets/images/carousel/slide1@x2.jpg">
+            </div>
+        </igx-slide>
+        <igx-slide>
+            <div class="slide-content-wrapper">
+                <img src="assets/images/carousel/16:9-CulturalDip.png">
+            </div>
+        </igx-slide>
+        <igx-slide>
+            <div class="slide-content-wrapper">
+                <img src="assets/images/carousel/slide3@x2.jpg">
+            </div>
+        </igx-slide>
+    </igx-carousel>
+</div>

src/app/layouts/carousel/carousel-styling-sample/carousel-styling-sample.component.scss

@@ -0,0 +1,15 @@
+@use "layout.scss";
+@use "igniteui-angular/theming" as *;
+
+// Create expansion panel theme
+$custom-panel-theme: carousel-theme(
+  $button-background: rgb(124 50 221 / 60%),
+  $button-arrow-color: #c5bcd0,
+  $button-hover-arrow-color: #F3E8FF,
+  $indicator-background: rgb(124 50 221 / 60%),
+  $indicator-border-color: #a29aab,
+  $button-shadow: var(--ig-elevation-5)
+);
+
+// Apply the custom themes to the components mixins.
+@include css-vars($custom-panel-theme); 

src/app/layouts/carousel/carousel-styling-sample/carousel-styling-sample.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular';
+
+@Component({
+    selector: 'app-carousel',
+    styleUrls: ['./carousel-styling-sample.component.scss'],
+    templateUrl: './carousel-styling-sample.component.html',
+    imports: [IgxCarouselComponent, IgxSlideComponent]
+})
+
+export class CarouselStylingSampleComponent { }

src/app/layouts/carousel/carousel-styling-sample/layout.scss

@@ -0,0 +1,27 @@
+.carousel-container {
+  margin: 2rem 2rem auto;
+}
+
+:host ::ng-deep {
+  [role='button'],
+  [role='tablist'] {
+    backdrop-filter: blur(2px);
+
+    &:hover {
+      backdrop-filter: blur(10px);
+    }
+  }
+
+  .igx-carousel__inner {
+    min-width: unset;
+  }
+
+  .igx-slide {
+    display: flex;
+    align-items: center;
+
+    img {
+      min-height: 15rem;
+    }
+  }
+}

src/app/layouts/carousel/carousel-tailwind-sample/carousel-tailwind-sample.component.html

@@ -0,0 +1,19 @@
+<div class="carousel-container">
+    <igx-carousel class=" ![--indicator-background:#a7b6de] ![--button-background:#a7b6de] ![--button-hover-background:#8d9abc] ![--indicator-border-color:#3E4853] ![--indicator-active-border-color:#000000]  ![--button-hover-arrow-color:#000000] ![--button-arrow-color:#3E4853]">
+        <igx-slide>
+            <div class="slide-content-wrapper">
+                <img src="assets/images/carousel/slide1@x2.jpg">
+            </div>
+        </igx-slide>
+        <igx-slide>
+            <div class="slide-content-wrapper">
+                <img src="assets/images/carousel/16:9-CulturalDip.png">
+            </div>
+        </igx-slide>
+        <igx-slide>
+            <div class="slide-content-wrapper">
+                <img src="assets/images/carousel/slide3@x2.jpg">
+            </div>
+        </igx-slide>
+    </igx-carousel>
+</div>

src/app/layouts/carousel/carousel-tailwind-sample/carousel-tailwind-sample.component.scss

@@ -0,0 +1,22 @@
+igx-carousel {
+  --button-shadow: var(--ig-elevation-15);
+}
+
+.carousel-container {
+  margin: 2rem 2rem auto;
+}
+
+:host ::ng-deep {
+  .igx-carousel__inner {
+    min-width: unset;
+  }
+
+  .igx-slide {
+    display: flex;
+    align-items: center;
+
+    img {
+      min-height: 15rem;
+    }
+  }
+}

src/app/layouts/carousel/carousel-tailwind-sample/carousel-tailwind-sample.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { IgxCarouselComponent, IgxSlideComponent} from 'igniteui-angular';
+
+@Component({
+    selector: 'app-carousel',
+    styleUrls: ['./carousel-tailwind-sample.component.scss'],
+    templateUrl: './carousel-tailwind-sample.component.html',
+    imports: [IgxCarouselComponent, IgxSlideComponent]
+})
+
+export class CarouselTailwindSampleComponent { }

src/app/layouts/layouts-routes-data.ts

@@ -15,6 +15,8 @@ export const layoutsRoutesData = {
     'carousel-no-navigation-sample': { displayName: 'Carousel No Navigation', parentName: 'Carousel' },
     'carousel-animations-sample': { displayName: 'Carousel Animations', parentName: 'Carousel' },
     'carousel-with-components-sample': { displayName: 'Carousel With Other Components', parentName: 'Carousel' },
+    'carousel-tailwind-sample': { displayName: 'Carousel Tailwind', parentName: 'Carousel' },
+    'carousel-styling-sample': { displayName: 'Carousel Styling', parentName: 'Carousel' },
     'dock-manager-sample': { displayName: 'Dock Manager', parentName: 'Dock Manager' },
     'expansion-sample-1': { displayName: 'Expansion Panel 1', parentName: 'Expansion Panel' },
     'expansion-sample-2': { displayName: 'Expansion Panel 2', parentName: 'Expansion Panel' },

src/app/layouts/layouts.routes.ts

@@ -21,6 +21,12 @@ import {
 import {
     CarouselWithComponentsSampleComponent
 } from './carousel/carousel-with-components-sample/carousel-with-components-sample.component';
+import {
+    CarouselTailwindSampleComponent
+} from './carousel/carousel-tailwind-sample/carousel-tailwind-sample.component';
+import {
+    CarouselStylingSampleComponent
+} from './carousel/carousel-styling-sample/carousel-styling-sample.component';
 import { CarouselComponent } from './carousel/carousel.component';
 import { DividerDashedComponent } from './divider/dashed/divider-dashed.component';
 import { DividerDefaultComponent } from './divider/default/divider-default.component';
@@ -144,6 +150,16 @@ export const LayoutsRoutes: Routes = [
         data: layoutsRoutesData['carousel-with-components-sample'],
         path: 'carousel-with-components-sample'
     },
+    {
+        component: CarouselTailwindSampleComponent,
+        data: layoutsRoutesData['carousel-tailwind-sample'],
+        path: 'carousel-tailwind-sample'
+    },
+    {
+        component: CarouselStylingSampleComponent,
+        data: layoutsRoutesData['carousel-styling-sample'],
+        path: 'carousel-styling-sample'
+    },
     {
         component: CarouselComponent,
         data: layoutsRoutesData['carousel'],