gbrlsnchs / material2-carousel Goto Github PK

View Code? Open in Web Editor NEW

85.0 9.0 113.0 2.61 MB

A carousel component for Angular using Material

Home Page: https://gsr.dev/material2-carousel

License: MIT License

JavaScript 2.58% TypeScript 63.24% HTML 26.73% SCSS 7.45%

carousel carousel-component angular aot-compatible angular-material material

material2-carousel's Introduction

Material Carousel

NOTICE

I no longer use Angular. By not using Angular anymore, it means I no longer use this component, what prevents me from pushing quality commits, doing assertive code reviews and being up-to-date with new Angular releases. I don't do open source for stars, I do to help people, so I don't want people that depend on this component to have a bad support.

That said, for the sake of the community, I suggest you to use this fork instead (thanks gabrielbusarello!). There are a bunch of small issues to be solved and also some major ones but I'm sure someone actively using Angular will handle them with ease.

Thanks for the support and take care!

About

This package is a carousel component for Angular using Material Design.

Until v1 is reached, breaking changes may be introduced.

Installing

npm install --save @ngmodule/material-carousel

Importing

//...
import { MatCarouselModule } from '@ngmodule/material-carousel';

@NgModule({
  // ...
  imports: [
    // ...
    MatCarouselModule.forRoot(),
    // ...
  ]
})
export class AppModule {}

Usage

`MatCarouselComponent`

import { MatCarousel, MatCarouselComponent } from '@ngmodule/material-carousel';

<mat-carousel>
  ...
</mat-carousel>

Attributes

Input	Type	Description	Default value
`timings`	`string`	Timings for slide animation.	`'250ms ease-in'`
`autoplay`	`boolean`	Enable automatic sliding.	`true`
`interval`	`number`	Autoplay's interval in milliseconds.	`5000`
`loop`	`boolean`	Enable loop through arrows.	`true`
`hideArrows`	`boolean`	Hide navigation arrows.	`false`
`hideIndicators`	`boolean`	Hide navigation indicators.	`false`
`color`	`ThemePalette`	Color palette from Material.	`'accent'`
`maxWidth`	`string`	Maximum width.	`'auto'`
`maintainAspectRatio`	`boolean`	If true, use `proportion` to determine height, else `slideHeight` is used.	`true`
`proportion`	`number`	Height proportion compared to width.	`25`
`slideHeight`	`string`	Explicit slide height. Used when maintainAspectRatio is false.	`'100%'`
`slides`	`number`	Maximum amount of displayed slides.
`useKeyboard`	`boolean`	Enable keyboard navigation.	`true`
`useMouseWheel`	`boolean`	Enable navigation through mouse wheeling.	`false`
`orientation`	`Orientation`	Orientation of the sliding panel.	`'ltr'`
`svgIconOverrides`	`SvgIconOverrides`	Override default carousel icons with registered SVG icons.

Size Considerations and Recommendations

By default, maintainAspectRatio is true, which means height is controlled through proportion.

If you want to have a carousel with constant height (regardless of width), you must set maintainAspectRatio to false.

By default, slideHeight is set to 100%, which will not work if the parent element height isn't defined (i.e. relative heights do not work if the parent height is auto). In that case you could pass a valid css string for slideHeight. You can use any valid css height string like 100px or 25vh.

Play around with the demo to see how you can use this carousel with or without explicit parent height.

With parent elements that have height:auto

use proportion if you want a carousel that resizes responsively (this is the default configuration).
use maintainAspectRatio="false" and a non-percentage slideHeight if you want a fixed height carousel.
DO NOT use relative (%) values for slideHeight; the carousel will not render.

With parent elements that have a set height

use maintainAspectRatio="false" if you want a fixed height carousel that fills the parent element (slideHeight is 100% by default).
DO NOT use maintainAspectRatio="false" and slideHeight (unless slideHeight="100%"); the carousel will not render correctly because the buttons and indicators will be positioned with respect to the parent.
DO NOT use proportion; this will lead to gaps or unwanted overflow.

`MatCarouselSlideComponent`

import { MatCarouselSlide, MatCarouselSlideComponent } from '@ngmodule/material-carousel';

<mat-carousel>
  <mat-carousel-slide>
    ...
  </mat-carousel-slide>
</mat-carousel>

Attributes

Input	Type	Description	Default value
`image`	`string`	Image displayed in the slide.
`overlayColor`	`string`	Color of the slide's overlay.	`'#00000040'`
`hideOverlay`	`boolean`	Toggle overlay on/off.	`false`
`disabled`	`boolean`	Skip slide when navigating.	`false`

Contributing

How to help

For bugs and opinions, please open an issue
For pushing changes, please open a pull request

How to develop and test

Testing

ng test carousel --watch false

Running the demo application

ng serve demo --source-map

material2-carousel's People

Contributors

Stargazers

Watchers

material2-carousel's Issues

Click event on carousal

Glad to see carousal in material, i have a requirement like click event on carousal image, please help me out

Demo of stackblitz

Can anyone make a demo in stackblitz. Some how I can't use this ..

Thanks

ExpressionChangedAfterItHasBeenCheckedError

Using angular 9 I get an ExpressionChangedAfterItHasBeenCheckedError.

I solved it by overriding the MatCarouselSlideComponent and adding { static: true } to the templateRef property.

This is my component:

import { Component, forwardRef, TemplateRef, ViewChild } from '@angular/core';
import { MatCarouselSlideComponent } from '@ngmodule/material-carousel';

@Component({
    selector: 'agp-carousel-slide',
    templateUrl: './carousel-slide.component.html',
    styleUrls: ['./carousel-slide.component.scss'],
    providers: [
        { provide: MatCarouselSlideComponent, useExisting: forwardRef(() => CarouselSlideComponent) }
    ]
})
export class CarouselSlideComponent extends MatCarouselSlideComponent {
    @ViewChild(TemplateRef, { static: true }) public templateRef: TemplateRef<any>;
}

It would be nice if this fix gets included in the core library so we dont have to override the component ourselves.

Missing dependencie

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  export: [
    ...    
    BrowserAnimationsModule
  ],
  ...
})

I want to reset the slide once I delete any slide from the slider

I want to reset the slider once I delete any slide from the slider

Ivy broke carousel?

I recently upgraded to ivy because of production reasons. And the carousel was working perfectly fine, but after the upgrade, it is in the DOM but the slides won't show up.
Can it be that ivy and the bug I experiences are related?

Slide output event needed

Is there any way to get the current active slide (value)?
I need it inside the TS file.

Loop property not being respected when swiping

Conditions:

Loop property is set to true
User swipes right to the last slide, then swipes right once more

Expected:

Carousel loops back to the first slide

Actual results:

Carousel does not loop back to the first slide

Note: If user clicks the arrow, carousel loops back as expected.
The same issue applies when trying to swipe left from the first slide, carousel does not loop back to the last slide.

Drag on mat-slider breaks when installing the carousel

After installing the module and adding to the includes section in the module file, (before importing into any components), the 'drag' function on the Material slider itself seems to stop working (can click to move the slider, but can no longer drag it). Maybe there is some clash of the classes?

Disabled property not working properly

Hi,

When disabled attribute is set to true, carousel arrows are being disabled but not carousel indicators user is able to operate through them.

Always wait for animations to finish

Not waiting for animations to finish seems glitchy and takes out the fluidity when sliding. Make it permanent.

Allow to set custom height

Right now the only way to modify the height of the rendered list of a mat-carousel is to modify the proportion, this is very bad.
In conclusion, I think this is garbage, I mean why would you adjust the bottom padding based on the [proportion] and not on height??.

Need to Change Slide Animation

how to change sliding animation effect int carousel

Material deep imports

In order to be compliant with Angular Material v9, the dependencies must be deeply imported, otherwise once projects update to Angular 9 and Angular Material v9, the build will break.
See https://github.com/angular/components/releases/tag/9.0.0-next.0

Images not displayed in Angular 8

I'm using the example from the demo website

  <mat-carousel
    timings="250ms ease-in"
    [autoplay]="true"
    interval="5000"
    color="accent"
    maxWidth="100%"
    proportion="100"
    slides="5"
    [loop]="true"
    [hideArrows]="false"
    [hideIndicators]="false"
    [useKeyboard]="true"
    [useMouseWheel]="false"
    orientation="ltr"
  >
    <mat-carousel-slide
      #matCarouselSlide
      *ngFor="let slide of slides; let i = index"
      [image]="slide.image"
      overlayColor="#00000040"
      [hideOverlay]="false"
    ></mat-carousel-slide>
  </mat-carousel>

And all I get is a grey background:

Here is my "slides" array:

  slides = [{
    image: 'https://arbordayblog.org/wp-content/uploads/2018/06/oak-tree-sunset-iStock-477164218-1080x608.jpg',
  }, {
    image: 'https://arbordayblog.org/wp-content/uploads/2018/06/oak-tree-sunset-iStock-477164218-1080x608.jpg',
  }, {
    image: 'https://arbordayblog.org/wp-content/uploads/2018/06/oak-tree-sunset-iStock-477164218-1080x608.jpg',
  }, {
    image: 'https://arbordayblog.org/wp-content/uploads/2018/06/oak-tree-sunset-iStock-477164218-1080x608.jpg',
  }, {
    image: 'https://arbordayblog.org/wp-content/uploads/2018/06/oak-tree-sunset-iStock-477164218-1080x608.jpg',
  }];

This is my first time trying to use the library, so I'm not sure if it is an Angular 8 problem, or a "me" problem. Feel free to close if it is the latter. Thanks.

Infinite slide loop

Hello! When will you implement an infinite slide loop?

Gestures not working and warning in console.

Hi!

In your example I can use gestures for change the sliders.

But it's not working in the Angular 9. Then I see an warning in console.

I think this is what is causing the problem. If was that, I can do some tests, and submit a PR.

Does this lib support Angular universal?

I got this error

core.js:421 DEPRECATED: DI is instantiating a token "MatCarouselHammerConfig" that inherits its @Injectable decorator but does not provide one itself. This will become an error in v10. Please add @Injectable() to the "MatCarouselHammerConfig" class.

and it cannot route to any route use this lib(use browser). but it is can route if i route to another page then route to it use routerLink in apps.

Edit1: it is cause by autoplay attribute.

Support multiple slides

As cited here, it would be nice to have support for multiple slides in a single list item.

Does it work with Angular Universal with Server Side Render?

When I'm including CarouselComponent on MainPage of the project, it is just freeze everything. Server is not responding. There is no any warning in Node.js console.
But it works fine, when browser generate content. For example if move CarouselComponent to AboutPage, and routing from MainPage to AboutPage. But if I'm trying to refresh About (Server Side Render), same result.

Swipe slide not working on Angular 9

i have update my project to Angular 9, when i set enableIvy to true, swipe doesn't working anymore

Vertical scrolling not working on mobile devices

Cannot scroll to bottom or top in the carousel zone (only on mobile devices). This issue is probably due to these inline CSS rules:

    touch-action: none;
    user-select: none;
    -webkit-user-drag: none;

Can there be an array of images instead of the one on the slide in the template?

I'm a noob and feel like there must be some easy way to refer to an array of images for the carousel instead of the one image in the template slide. I tried many different things and am not ready to give it up. I love this carousel code on your github and want to use that, but I have no idea how to display multiple images. It says "slidesList" but I can't seem to get a slidesList going. At this point I'd be happy if I could create a youtube video of my slides and link it the url lol.
I saw another issue from last year mentioning multiple image functionality. Are there any updates?

Get Arrows on mouse Hover

I want arrows to show up only on mouse hover on slides otherwise they remain hidden. Is that possible in any way?

Images do not load until mouseover of slide

I added the carousel to my angular 8 app, and it works great, except I noticed that the images do not appear until I mouse over a slide. Instead it loads the carousel in the correct proportions with a blank slide, like this:

The rendered html looks like this:

Once I mouseover the the slide, the image and other content load and display properly. The code for the carousel I am using is as follows

<mat-carousel
timings="500ms ease-in"
[autoplay]="false"
color="primary"
maxWidth="auto"
[maintainAspectRatio]="false"
[slideHeight]="'500px'"
proportion="25"
slides="5"
[loop]="false"
[hideArrows]="false"
[hideIndicators]="false"
[useKeyboard]="true"
[useMouseWheel]="false"
orientation="ltr"

  <mat-carousel-slide [image]="'assets/images/screenshots/goals.png'" [hideOverlay]="true">
     <div class="slide-caption-container">
        <div class="slide-caption">
           <div class="slide-header">
              Goals
           </div>
           <div class="slide-description">
              Set a long term vision for your organization and track your progress.
           </div>
        </div>
     </div>
  </mat-carousel-slide>
  <mat-carousel-slide [image]="'assets/images/screenshots/rocks.png'" [hideOverlay]="true">
     <div class="slide-caption-container">
        <div class="slide-caption">
           <div class="slide-header">
              Rocks
           </div>
           <div class="slide-description">
              Bridge the gap between where you are and where you need to be. Rocks are targeted,
              90 day initiatives that focus departments towards improving in a specific,
              measureable manner.
           </div>
        </div>
     </div>
  </mat-carousel-slide>

Note: I do have a workaround for this. I discovered that forcing change detection in ngAfterViewInit caused the slides to display correctly. Ideally though, this should not be required.

Error during template compile of 'MatCarouselHammerConfig'

I did everything you said had to be done to use this and I got that error.

There is a conflict between horizontal and vertical scroll on mobile devices.

Hello,

if there is a vertical scroll inside carousel item and user starts vertical scrolling - carousel horizontal scroll occurs.

Add support for number of slider item per slide.

Reference : https://codepen.io/omowunmiekun/pen/GRKPbxW

Five images into carousel

Dear gbrlsnchs,

Excuse me for such a basic question.

I was able to run your code from material2-carousel while testing my app.
I am able to see 1 image running repeating itself into the carousel loop.

My question: I need to add a total of 5 images but cannot figure out where to add the other 4 links to create the loop. How do I accomplish this?
Thanks so much.
Ron

slideHeight input attribute value not working properly

I am just trying to use a fixed height slider with the following configuration
<mat-carousel
timings="250ms ease-in"
[autoplay]="true"
interval="50000"
color="accent"
maxWidth="auto"
maintainAspectRatio = false
slideHeight="300px"
slides=3
[loop]="true"
[hideArrows]="false"
[hideIndicators]="true"
[useKeyboard]="true"
[useMouseWheel]="false"
orientation="ltr"

it takes proportion value = 25 , and that's true,but why it takes
in carousel.component.html

style.padding-bottom = 25%, although it's expression("maintainAspectRatio && proportion ? proportion + '%': '0px'") not true

Goes to first slide on window resize

Bug.

To reproduce:

Open demo
Go to the second slide
Resize window

Expected behavior:

Resizing window should not trigger sliding

Very annoying on mobile devices where the address bar is shown/hidden automatically.

Feature Request: Lazy loading on slide

can we have contents loaded when the slide is rendered?
for example, I am loading .mov file in each slide, the animation starts playing when the entire component is loaded.
In case I get an option to load animation (or any content) when the slide is rendered it would be a good feature.

Thanks in advance.

bugs and opinions...

Just tried to use this carousel and it looks good to me, just a few opinions and a feature request:

a) I want the photos to be contained, not to be covered, so I need an option to force
background-size: contain
instead of
background-size: cover
in the .carousel-slide css class.

b) My indicators do not appear in the center of the slides, they appear in the right half. In the css styles I see these styles:

left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);

If I switch off all of these, they appear where they should be.

c) I also want to configure margins for indicators. At the moment I see
.carousel-indicators {
bottom: 15px;
margin-right: 15%;
margin-left: 15%;
}

I want to switch off all of these, to have them in a good position.

d) Feature request: I want a carousel with a maximize button, just like in the slider here:
https://www.recordstores.love/56
Here you see a ninja slider with a double arrow in the bottom right corner. If you click that, the whole carousel will maximize (not just one image). I like this feature.

Please contact me if you need an example for a) to c).

How to overrides icons?

Expected something like this? But not...

<ng-template svgIconOverrides="arrowBack">
  	<mat-icon svgIcon="custom_back"></mat-icon>
  </ng-template>
  <ng-template svgIconOverrides="arrowForward">
  	<mat-icon svgIcon="custom_forward"></mat-icon>
  </ng-template>

orientation "ltr" is working till the last slide but not again to first slid

suppose I have 4 slides, on next the next one is loading fine, but when i reach to the fourth slide and click on next it sudden go to the first slide and sliding all the slid, i need it like 1=>2=>3=>4=>1=>2=>3=>4=>1

Support keyboard and mousewheel navigation

As cited here, it would be nice to have support for navigating using keyboard (through arrows) and mouse (through mousewheel).

Jump to specific slide by clicking on custom button

Scenario:

I have multiple slides with buttons on them.
On click of that button it should jump/navigate to specified slide.

Not able to set height of material carousel.

I am using material carousel and trying to set it's height , I tried slideheight, proportion but not able to fix height . Maybe i'm missing something. Please help .

My code is:
<mat-carousel
timings="500ms ease-in"
[autoplay]="true"
interval="5000"
color="accent"
maxWidth="auto"
slides="2"
slideHeight="50vh"
[loop]="true"
[hideArrows]="false"
[hideIndicators]="false"
[useKeyboard]="true"
[useMouseWheel]="false"

    <mat-carousel-slide  #matCarouselSlide>
            <div class="row">
                    <div class="col-3">
          
                          <div class="url-card"> <a href="health-details.html">
                                  <div class="card-badge"><span class="badge badge-light">FLAPPING</span></div>
                                  <div class="url-row">
                                    <div class="title-block text-uppercase">indiatimes.com <span class="portnum dark-font">80</span></div>
                                    <div class="font-normal">Sarvesh Kumar</div>
                                  </div>
                                  <div class="url-row row">
                                    <div class="col p-0 text-left">
                                      <div class="grey-small-title">business</div>
                                      <div class="dark-font text-uppercase">IT</div>
                                    </div>
                                    <div class="col p-0 text-right">
                                      <div class="grey-small-title">location</div>
                                      <div class="dark-font">MUM-Z2</div>
                                    </div>
                                  </div>
                                  <div class="url-row row">
                                    <div class="col p-0 text-left">
                                      <div class="grey-small-title">SINCE</div>
                                      <div class="dark-font">1 min, 6 secs</div>
                                    </div>
                                    <div class="col p-0 text-right">
                                      <div class="grey-small-title">TYPE</div>
                                      <div class="dark-font">Private VIP</div>
                                    </div>
                                  </div>
                                  </a> </div>
                          
                    </div>
                    <div class="col-3">
                          <mat-card class="url-card" >
                                  
                                  <mat-card-content>
                                         
                                                  <div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
                                                  <div class="url-row">
                                                    <div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
                                                    <div class="font-normal">Pawan Kumar</div>
                                                  </div>
                                                  <div class="url-row row">
                                                    <div class="col p-0 text-left">
                                                      <div class="grey-small-title">business</div>
                                                      <div class="dark-font text-uppercase">CORPORATE</div>
                                                    </div>
                                                    <div class="col p-0 text-right">
                                                      <div class="grey-small-title">location</div>
                                                      <div class="dark-font">CHN-Z1</div>
                                                    </div>
                                                  </div>
                                                  <div class="url-row row">
                                                    <div class="col p-0 text-left">
                                                      <div class="grey-small-title">SINCE</div>
                                                      <div class="dark-font">2 min, 12 secs</div>
                                                    </div>
                                                    <div class="col p-0 text-right">
                                                      <div class="grey-small-title">TYPE</div>
                                                      <div class="dark-font">CDN</div>
                                                    </div>
                                                  </div>
                                               
                                  </mat-card-content>
                                
                                </mat-card>
                    </div>
                    <div class="col-3">
                          <mat-card class="url-card" >
                                  
                                  <mat-card-content>
                                         
                                                  <div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
                                                  <div class="url-row">
                                                    <div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
                                                    <div class="font-normal">Pawan Kumar</div>
                                                  </div>
                                                  <div class="url-row row">
                                                    <div class="col p-0 text-left">
                                                      <div class="grey-small-title">business</div>
                                                      <div class="dark-font text-uppercase">CORPORATE</div>
                                                    </div>
                                                    <div class="col p-0 text-right">
                                                      <div class="grey-small-title">location</div>
                                                      <div class="dark-font">CHN-Z1</div>
                                                    </div>
                                                  </div>
                                                  <div class="url-row row">
                                                    <div class="col p-0 text-left">
                                                      <div class="grey-small-title">SINCE</div>
                                                      <div class="dark-font">2 min, 12 secs</div>
                                                    </div>
                                                    <div class="col p-0 text-right">
                                                      <div class="grey-small-title">TYPE</div>
                                                      <div class="dark-font">CDN</div>
                                                    </div>
                                                  </div>
                                               
                                  </mat-card-content>
                                
                                </mat-card>
                    </div>
                    <div class="col-3">
                          <mat-card class="url-card" >
                                  
                                  <mat-card-content>
                                         
                                                  <div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
                                                  <div class="url-row">
                                                    <div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
                                                    <div class="font-normal">Pawan Kumar</div>
                                                  </div>
                                                  <div class="url-row row">
                                                    <div class="col p-0 text-left">
                                                      <div class="grey-small-title">business</div>
                                                      <div class="dark-font text-uppercase">CORPORATE</div>
                                                    </div>
                                                    <div class="col p-0 text-right">
                                                      <div class="grey-small-title">location</div>
                                                      <div class="dark-font">CHN-Z1</div>
                                                    </div>
                                                  </div>
                                                  <div class="url-row row">
                                                    <div class="col p-0 text-left">
                                                      <div class="grey-small-title">SINCE</div>
                                                      <div class="dark-font">2 min, 12 secs</div>
                                                    </div>
                                                    <div class="col p-0 text-right">
                                                      <div class="grey-small-title">TYPE</div>
                                                      <div class="dark-font">CDN</div>
                                                    </div>
                                                  </div>
                                               
                                  </mat-card-content>
                                
                                </mat-card>
                    </div>
                    <div class="col-3">
                          <mat-card class="url-card" >
                                  
                                  <mat-card-content>
                                         
                                                  <div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
                                                  <div class="url-row">
                                                    <div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
                                                    <div class="font-normal">Pawan Kumar</div>
                                                  </div>
                                                  <div class="url-row row">
                                                    <div class="col p-0 text-left">
                                                      <div class="grey-small-title">business</div>
                                                      <div class="dark-font text-uppercase">CORPORATE</div>
                                                    </div>
                                                    <div class="col p-0 text-right">
                                                      <div class="grey-small-title">location</div>
                                                      <div class="dark-font">CHN-Z1</div>
                                                    </div>
                                                  </div>
                                                  <div class="url-row row">
                                                    <div class="col p-0 text-left">
                                                      <div class="grey-small-title">SINCE</div>
                                                      <div class="dark-font">2 min, 12 secs</div>
                                                    </div>
                                                    <div class="col p-0 text-right">
                                                      <div class="grey-small-title">TYPE</div>
                                                      <div class="dark-font">CDN</div>
                                                    </div>
                                                  </div>
                                               
                                  </mat-card-content>
                                
                                </mat-card>
                    </div>
                    <div class="col-3">
                          <mat-card class="url-card" >
                                  
                                  <mat-card-content>
                                         
                                                  <div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
                                                  <div class="url-row">
                                                    <div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
                                                    <div class="font-normal">Pawan Kumar</div>
                                                  </div>
                                                  <div class="url-row row">
                                                    <div class="col p-0 text-left">
                                                      <div class="grey-small-title">business</div>
                                                      <div class="dark-font text-uppercase">CORPORATE</div>
                                                    </div>
                                                    <div class="col p-0 text-right">
                                                      <div class="grey-small-title">location</div>
                                                      <div class="dark-font">CHN-Z1</div>
                                                    </div>
                                                  </div>
                                                  <div class="url-row row">
                                                    <div class="col p-0 text-left">
                                                      <div class="grey-small-title">SINCE</div>
                                                      <div class="dark-font">2 min, 12 secs</div>
                                                    </div>
                                                    <div class="col p-0 text-right">
                                                      <div class="grey-small-title">TYPE</div>
                                                      <div class="dark-font">CDN</div>
                                                    </div>
                                                  </div>
                                               
                                  </mat-card-content>
                                
                                </mat-card>
                    </div>
                    <div class="col-3">
                          <mat-card class="url-card" >
                                  
                                  <mat-card-content>
                                         
                                                  <div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
                                                  <div class="url-row">
                                                    <div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
                                                    <div class="font-normal">Pawan Kumar</div>
                                                  </div>
                                                  <div class="url-row row">
                                                    <div class="col p-0 text-left">
                                                      <div class="grey-small-title">business</div>
                                                      <div class="dark-font text-uppercase">CORPORATE</div>
                                                    </div>
                                                    <div class="col p-0 text-right">
                                                      <div class="grey-small-title">location</div>
                                                      <div class="dark-font">CHN-Z1</div>
                                                    </div>
                                                  </div>
                                                  <div class="url-row row">
                                                    <div class="col p-0 text-left">
                                                      <div class="grey-small-title">SINCE</div>
                                                      <div class="dark-font">2 min, 12 secs</div>
                                                    </div>
                                                    <div class="col p-0 text-right">
                                                      <div class="grey-small-title">TYPE</div>
                                                      <div class="dark-font">CDN</div>
                                                    </div>
                                                  </div>
                                               
                                  </mat-card-content>
                                
                                </mat-card>
                    </div>
                    <div class="col-3">
                          <mat-card class="url-card" >
                                  
                                  <mat-card-content>
                                         
                                                  <div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
                                                  <div class="url-row">
                                                    <div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
                                                    <div class="font-normal">Pawan Kumar</div>
                                                  </div>
                                                  <div class="url-row row">
                                                    <div class="col p-0 text-left">
                                                      <div class="grey-small-title">business</div>
                                                      <div class="dark-font text-uppercase">CORPORATE</div>
                                                    </div>
                                                    <div class="col p-0 text-right">
                                                      <div class="grey-small-title">location</div>
                                                      <div class="dark-font">CHN-Z1</div>
                                                    </div>
                                                  </div>
                                                  <div class="url-row row">
                                                    <div class="col p-0 text-left">
                                                      <div class="grey-small-title">SINCE</div>
                                                      <div class="dark-font">2 min, 12 secs</div>
                                                    </div>
                                                    <div class="col p-0 text-right">
                                                      <div class="grey-small-title">TYPE</div>
                                                      <div class="dark-font">CDN</div>
                                                    </div>
                                                  </div>
                                               
                                  </mat-card-content>
                                
                                </mat-card>
                    </div>
                  </div>
    </mat-carousel-slide>
    <mat-carousel-slide>
            <div class="row">
                    <div class="col-3">
          
                          <div class="url-card"> <a href="health-details.html">
                                  <div class="card-badge"><span class="badge badge-light">FLAPPING</span></div>
                                  <div class="url-row">
                                    <div class="title-block text-uppercase">indiatimes.com <span class="portnum dark-font">80</span></div>
                                    <div class="font-normal">Sarvesh Kumar</div>
                                  </div>
                                  <div class="url-row row">
                                    <div class="col p-0 text-left">
                                      <div class="grey-small-title">business</div>
                                      <div class="dark-font text-uppercase">IT</div>
                                    </div>
                                    <div class="col p-0 text-right">
                                      <div class="grey-small-title">location</div>
                                      <div class="dark-font">MUM-Z2</div>
                                    </div>
                                  </div>
                                  <div class="url-row row">
                                    <div class="col p-0 text-left">
                                      <div class="grey-small-title">SINCE</div>
                                      <div class="dark-font">1 min, 6 secs</div>
                                    </div>
                                    <div class="col p-0 text-right">
                                      <div class="grey-small-title">TYPE</div>
                                      <div class="dark-font">Private VIP</div>
                                    </div>
                                  </div>
                                  </a> </div>
                          
                    </div>
                    <div class="col-3">
                          <mat-card class="url-card" >
                                  
                                  <mat-card-content>
                                         
                                                  <div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
                                                  <div class="url-row">
                                                    <div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
                                                    <div class="font-normal">Pawan Kumar</div>
                                                  </div>
                                                  <div class="url-row row">
                                                    <div class="col p-0 text-left">
                                                      <div class="grey-small-title">business</div>
                                                      <div class="dark-font text-uppercase">CORPORATE</div>
                                                    </div>
                                                    <div class="col p-0 text-right">
                                                      <div class="grey-small-title">location</div>
                                                      <div class="dark-font">CHN-Z1</div>
                                                    </div>
                                                  </div>
                                                  <div class="url-row row">
                                                    <div class="col p-0 text-left">
                                                      <div class="grey-small-title">SINCE</div>
                                                      <div class="dark-font">2 min, 12 secs</div>
                                                    </div>
                                                    <div class="col p-0 text-right">
                                                      <div class="grey-small-title">TYPE</div>
                                                      <div class="dark-font">CDN</div>
                                                    </div>
                                                  </div>
                                               
                                  </mat-card-content>
                                
                                </mat-card>
                    </div>
                    <div class="col-3">
                          <mat-card class="url-card" >
                                  
                                  <mat-card-content>
                                         
                                                  <div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
                                                  <div class="url-row">
                                                    <div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
                                                    <div class="font-normal">Pawan Kumar</div>
                                                  </div>
                                                  <div class="url-row row">
                                                    <div class="col p-0 text-left">
                                                      <div class="grey-small-title">business</div>
                                                      <div class="dark-font text-uppercase">CORPORATE</div>
                                                    </div>
                                                    <div class="col p-0 text-right">
                                                      <div class="grey-small-title">location</div>
                                                      <div class="dark-font">CHN-Z1</div>
                                                    </div>
                                                  </div>
                                                  <div class="url-row row">
                                                    <div class="col p-0 text-left">
                                                      <div class="grey-small-title">SINCE</div>
                                                      <div class="dark-font">2 min, 12 secs</div>
                                                    </div>
                                                    <div class="col p-0 text-right">
                                                      <div class="grey-small-title">TYPE</div>
                                                      <div class="dark-font">CDN</div>
                                                    </div>
                                                  </div>
                                               
                                  </mat-card-content>
                                
                                </mat-card>
                    </div>
                    <div class="col-3">
                          <mat-card class="url-card" >
                                  
                                  <mat-card-content>
                                         
                                                  <div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
                                                  <div class="url-row">
                                                    <div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
                                                    <div class="font-normal">Pawan Kumar</div>
                                                  </div>
                                                  <div class="url-row row">
                                                    <div class="col p-0 text-left">
                                                      <div class="grey-small-title">business</div>
                                                      <div class="dark-font text-uppercase">CORPORATE</div>
                                                    </div>
                                                    <div class="col p-0 text-right">
                                                      <div class="grey-small-title">location</div>
                                                      <div class="dark-font">CHN-Z1</div>
                                                    </div>
                                                  </div>
                                                  <div class="url-row row">
                                                    <div class="col p-0 text-left">
                                                      <div class="grey-small-title">SINCE</div>
                                                      <div class="dark-font">2 min, 12 secs</div>
                                                    </div>
                                                    <div class="col p-0 text-right">
                                                      <div class="grey-small-title">TYPE</div>
                                                      <div class="dark-font">CDN</div>
                                                    </div>
                                                  </div>
                                               
                                  </mat-card-content>
                                
                                </mat-card>
                    </div>
                    <div class="col-3">
                          <mat-card class="url-card" >
                                  
                                  <mat-card-content>
                                         
                                                  <div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
                                                  <div class="url-row">
                                                    <div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
                                                    <div class="font-normal">Pawan Kumar</div>
                                                  </div>
                                                  <div class="url-row row">
                                                    <div class="col p-0 text-left">
                                                      <div class="grey-small-title">business</div>
                                                      <div class="dark-font text-uppercase">CORPORATE</div>
                                                    </div>
                                                    <div class="col p-0 text-right">
                                                      <div class="grey-small-title">location</div>
                                                      <div class="dark-font">CHN-Z1</div>
                                                    </div>
                                                  </div>
                                                  <div class="url-row row">
                                                    <div class="col p-0 text-left">
                                                      <div class="grey-small-title">SINCE</div>
                                                      <div class="dark-font">2 min, 12 secs</div>
                                                    </div>
                                                    <div class="col p-0 text-right">
                                                      <div class="grey-small-title">TYPE</div>
                                                      <div class="dark-font">CDN</div>
                                                    </div>
                                                  </div>
                                               
                                  </mat-card-content>
                                
                                </mat-card>
                    </div>
                    <div class="col-3">
                          <mat-card class="url-card" >
                                  
                                  <mat-card-content>
                                         
                                                  <div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
                                                  <div class="url-row">
                                                    <div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
                                                    <div class="font-normal">Pawan Kumar</div>
                                                  </div>
                                                  <div class="url-row row">
                                                    <div class="col p-0 text-left">
                                                      <div class="grey-small-title">business</div>
                                                      <div class="dark-font text-uppercase">CORPORATE</div>
                                                    </div>
                                                    <div class="col p-0 text-right">
                                                      <div class="grey-small-title">location</div>
                                                      <div class="dark-font">CHN-Z1</div>
                                                    </div>
                                                  </div>
                                                  <div class="url-row row">
                                                    <div class="col p-0 text-left">
                                                      <div class="grey-small-title">SINCE</div>
                                                      <div class="dark-font">2 min, 12 secs</div>
                                                    </div>
                                                    <div class="col p-0 text-right">
                                                      <div class="grey-small-title">TYPE</div>
                                                      <div class="dark-font">CDN</div>
                                                    </div>
                                                  </div>
                                               
                                  </mat-card-content>
                                
                                </mat-card>
                    </div>
                    <div class="col-3">
                          <mat-card class="url-card" >
                                  
                                  <mat-card-content>
                                         
                                                  <div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
                                                  <div class="url-row">
                                                    <div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
                                                    <div class="font-normal">Pawan Kumar</div>
                                                  </div>
                                                  <div class="url-row row">
                                                    <div class="col p-0 text-left">
                                                      <div class="grey-small-title">business</div>
                                                      <div class="dark-font text-uppercase">CORPORATE</div>
                                                    </div>
                                                    <div class="col p-0 text-right">
                                                      <div class="grey-small-title">location</div>
                                                      <div class="dark-font">CHN-Z1</div>
                                                    </div>
                                                  </div>
                                                  <div class="url-row row">
                                                    <div class="col p-0 text-left">
                                                      <div class="grey-small-title">SINCE</div>
                                                      <div class="dark-font">2 min, 12 secs</div>
                                                    </div>
                                                    <div class="col p-0 text-right">
                                                      <div class="grey-small-title">TYPE</div>
                                                      <div class="dark-font">CDN</div>
                                                    </div>
                                                  </div>
                                               
                                  </mat-card-content>
                                
                                </mat-card>
                    </div>
                    <div class="col-3">
                          <mat-card class="url-card" >
                                  
                                  <mat-card-content>
                                         
                                                  <div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
                                                  <div class="url-row">
                                                    <div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
                                                    <div class="font-normal">Pawan Kumar</div>
                                                  </div>
                                                  <div class="url-row row">
                                                    <div class="col p-0 text-left">
                                                      <div class="grey-small-title">business</div>
                                                      <div class="dark-font text-uppercase">CORPORATE</div>
                                                    </div>
                                                    <div class="col p-0 text-right">
                                                      <div class="grey-small-title">location</div>
                                                      <div class="dark-font">CHN-Z1</div>
                                                    </div>
                                                  </div>
                                                  <div class="url-row row">
                                                    <div class="col p-0 text-left">
                                                      <div class="grey-small-title">SINCE</div>
                                                      <div class="dark-font">2 min, 12 secs</div>
                                                    </div>
                                                    <div class="col p-0 text-right">
                                                      <div class="grey-small-title">TYPE</div>
                                                      <div class="dark-font">CDN</div>
                                                    </div>
                                                  </div>
                                               
                                  </mat-card-content>
                                
                                </mat-card>
                    </div>
                  </div>
    </mat-carousel-slide>
  </mat-carousel>

Clicking a carousel-indicator causes page to scroll

Conditions:

A carousel is partially hidden due to page scroll position, but the indicators are still visible.
User clicks on an indicator.

Expected:

Carousel jumps to the clicked slide, no other effects.

Actual:

Carousel jumps to the clicked slide, but also forces a page scroll to the top of the carousel

Can't Show images

Hello Bro

Can u help me out with this?

I pass the URL contain the image but it not work!!

Hope to hear from you soon

Multiple items on each

I need to display 3 items per slides, any help?

new fixes about remote urls for img.

can you add changes about remote url for img to npm package ?
Thank you!

ExpressionChangedAfterItHasBeenCheckedError received

I've got this error when using the carousel
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngTemplateOutlet: undefined'. Current value: 'ngTemplateOutlet: [object Object]

I have 2 components making using of the carousel. Both components are used on the same page. One of them is creating the error. Even with this simple setup:

    <mat-carousel slides="1">
      <mat-carousel-slide>
        1
      </mat-carousel-slide>
    </mat-carousel>

Is there anything I'm doing wrong, or is it simply a limitation on the use of the component?

mat-carousel-slide does not update when source changes.

In order to optimize my project I'm using responsive images based on the size of the screen. Currently seems like when I change the image source it does not update the mat-carousel-slide.

<mat-carousel
  #carousel
  [autoplay]="false"
  [maintainAspectRatio]="false">
  <mat-carousel-slide
    *ngFor="let item of items"
    [image]="item[propertyToBeUsed]"
    overlayColor="#00000020">
  </mat-carousel-slide>
</mat-carousel>

item is an object with 3 properties, big, medium and small. It will be changed based on propertyToBeUsed, that changes based on the size of the screen.

I think this should be fixed.

The library needs to update its dependencies, correct classes and repair the problem that gestures do not work

The library is outdated with the latest Angular dependencies so it generates Log in the browser console with warnings, also npm says that Angular Material is outdated. Please update the library.

This is the warning that shows in the console of the nevagador when using the library.

Also the gestures are not working.

How to disable the "grab" functionality of the carousel?

Hello,

I need to be able to create a static carousel where users don't "grab" and move the slides within the angular app I am building. This app is only intended for browser platforms for an older demographic as users and they might find the "grab and drag functionality" in moving slides frustrating if the interaction is accidental. Is there any tips/tricks to disable the drag functionality?

Getting warns from material-carousel on npm install

When I execute npm install I've been receiving these errors

npm WARN @ngmodule/[email protected] requires a peer of @angular/material@^7.0.0 but none is installed. You must install peer dependencies yourself.

npm WARN @ngmodule/[email protected] requires a peer of rxjs@~6.3.3 but none is installed. You must install peer dependencies yourself.

I have @angular/[email protected] and [email protected].

I have two custom button Next and Previous Functionality but its not working

<div mat-dialog-content style="border: 1px solid #dcdcdc;">
        <div class="demo-carousel">
            <mat-carousel
              #matCarousel
              [timings]="timings"
              [autoplay]="false"
              [interval]="interval"
              [loop]="false"
              [hideArrows]="hideArrows"
              [hideIndicators]="hideIndicators"
              [color]="color"
              [maxWidth]="maxWidth"
              [proportion]="proportion"
              [useKeyboard]="useKeyboard"
              [useMouseWheel]="useMouseWheel"
              [orientation]="orientation"
              [slides]="slides"
              (change)="onChange($event)">
      
              <mat-carousel-slide
                #matCarouselSlide
                *ngFor="let slide of slidesList; let i = index"
                image="{{slidesListDtls[i].image}}"
                [overlayColor]="overlayColor"
                [hideOverlay]="hideOverlay">
                <ng-container *ngIf="showContent">
                  <div
                    style="width: 85%; text-align: center; margin-left: 8%; height: 290%; display: flex; flex-direction: column; align-items: center; justify-content: center;">
                    
                    
                    <h5><strong> {{slidesListDtls[i].title}}</strong></h5>
                    <p> {{slidesListDtls[i].description}}
                    </p>
                  </div>
                </ng-container>
              </mat-carousel-slide>
            </mat-carousel>
          </div>
        </div>
       
        <div mat-dialog-actions>
          <div style="width: 100%; ">
            <div style="width: 20%; float: left;">
              <button mat-raised-button class="skipButton" [mat-dialog-close]="true" tabindex="-1">Skip</button></div>
            <div style="width: 70%; float: right;">
              
              <button mat-raised-button color="primary"  class="nextButton" (click)="next()" tabindex="2">Next</button>

              
              <button mat-raised-button class="previousButton" tabindex="1"><mat-icon _ngcontent-c13="" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" role="img" aria-hidden="true">arrow_forward</mat-icon></button>
            </div>
          </div>
        </div>

Support right-to-left orientation

Some users would like to use this component from right to left, sometimes because of their language or personal preference. Allow them to do so by adding an boolean rtl input property.

gbrlsnchs / material2-carousel Goto Github PK

material2-carousel's Introduction

Material Carousel

NOTICE

About

Installing

Importing

Usage

MatCarouselComponent

Attributes

Size Considerations and Recommendations

MatCarouselSlideComponent

Attributes

Contributing

How to help

How to develop and test

Testing

Running the demo application

material2-carousel's People

Contributors

Stargazers

Watchers

Forkers

material2-carousel's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs

`MatCarouselComponent`

`MatCarouselSlideComponent`