CODEWITHSUNDEEP
angularangular-materialcarousel
Sachini
Sachini

Reputation: 51

Is it possible to build an image carousel using angular material?

i am trying to develop an image carousel using angular material but i couldn't find any helpful resource.

I tried out https://github.com/gbrlsnchs/material2-carousel but didn't work and the code is complex.

Upvotes: 4

Views: 26548

Answers (2)

Sachini
Sachini

Reputation: 51

This works.

Add to TS

public slidesList = new Array<never>(5);
public showContent = false;
public listKeyManager: ListKeyManager<any>;
public timings = '300ms ease-in';
public autoplay = true;
public interval = 4000;
public loop = true;
public hideArrows = true;
public hideIndicators = false;
public color: ThemePalette = 'accent';
public maxWidth = 'auto';
public proportion = 10;
public images = [{ image: '../assets/img1.jfif' }];
public slides: any = this.chunk(this.images, 3);
// public overlayColor = '#f5f5f5';
public hideOverlay = false;
public useKeyboard = true;
public useMouseWheel = false;
public orientation: Orientation = 'ltr';
public log: string[] = [];

chunk(arr, chunkSize) {
  let R = [];
  for (let i = 0, len = arr.length; i < len; i += chunkSize) {
    R.push(arr.slice(i, i + chunkSize));
  }
  return R;
}

public onChange(index: number) {
  this.log.push(`MatCarousel#change emitted with index ${index}`);
}

public get currentIndex(): number {
  if (this.listKeyManager) {
    return this.listKeyManager.activeItemIndex;
  }
  return 0;
}

Add to HTML

<div class="demo-carousel" style="background-color: rgb(90, 85, 85)">
  <mat-carousel #matCarousel [timings]="timings" [autoplay]="autoplay" [interval]="interval" [loop]="loop"
    [hideArrows]="hideArrows" [hideIndicators]="hideIndicators" [color]="color" [maxWidth]="maxWidth"
    [proportion]="proportion" [useKeyboard]="useKeyboard" [useMouseWheel]="useMouseWheel" [orientation]="orientation"
    [slides]="slides" (change)="onChange($event)" class="display: flex; justify-content: flex-end">
    <mat-carousel-slide *ngFor="let slide of slides; let i = index">
      <ng-container class='cardImg'>
        <div
          style="width: 75%; height: 75%; display: flex; flex-direction: row; align-items: center; justify-content: space-around;">
          <mat-card *ngFor="let image of slide" class="img">
            <img [src]="image.image">
          </mat-card>
        </div>
      </ng-container>
    </mat-carousel-slide>
  </mat-carousel>
</div>

Add to app.module

imports: [
  BrowserModule,
  AppRoutingModule,
  MatCarouselModule,
  MatIconModule,
  MatButtonModule,
  BrowserAnimationsModule,
  MatCardModule
]

Add to SCSS

/* You can add global styles to this file, and also import other style files */

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@import "~@angular/material/theming";
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$demo-primary: mat-palette($mat-cyan);
$demo-accent: mat-palette($mat-light-green, A200, A100, A400);

// The warn palette is optional (defaults to red).
$demo-warn: mat-palette($mat-pink);

// Create the theme object (a Sass map containing all of the palettes).
$demo-light-theme: mat-light-theme($demo-primary, $demo-accent, $demo-warn);
$demo-dark-theme: mat-dark-theme($demo-primary, $demo-accent, $demo-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($demo-light-theme);

.demo-dark-theme {
  @include angular-material-theme($demo-dark-theme);
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}
.img{
  margin:50px;
  justify-content: space-around;
}
.cardImg{
  object-fit: cover;
  max-height: 10%;
  max-width: 33%;
}

I have modified and simplified the code in https://github.com/gbrlsnchs/material2-carousel . For further clarifications use that sample.enter image description here

Upvotes: 1

Chanaka Weerasinghe
Chanaka Weerasinghe

Reputation: 5742

Here is example for you

<ng-template #slide let-slide>
    <div [ngStyle]="{
      'background-size': 'cover',
      'background-image': 'url(' + slide.url + ')',
      'background-repeat': 'no-repeat',
      'width': '100%',
      'height': '100%'
    }">
    </div>
</ng-template>
<ng-template #thumbnail let-slide>
        <div [ngStyle]="{
        'background-size': 'cover',
        'background-image': 'url(' + slide.url + ')',
        'background-repeat': 'no-repeat',
        'background-position': 'center center',
        'width': '100%',
        'height': '100%'
      }"></div>
</ng-template>

Upvotes: 4

Related Questions