Cfrgtkky

I am using ngu-carousel for displaying carousel images for my application.

I am using the below html for the carousel images

 <ngu-carousel #myCarousel [inputs]="carouselConfig" [dataSource]="carouselItems" (onMove)="onmoveFn($event)">

    <ngu-tile *nguCarouselDef="let item;">

     <div class="tile" [style.background]="'url('+item+')'"></div>

    </ngu-tile>

For the simple images loading for different device I used the below code before:

<picture>

    <source srcset="./assets/images/chittu_1400_797.jpg " media="(min-width: 768px)">

    <img srcset="./assets/images/chittu_700_573.jpg" alt="Coastal view of ocean and mountains">

  </picture>

How to use media query in the case of carousel which load images like this [style.background]="'url('+item+')'" where carousel items is declared as below

carouselItems = [

    'assets/images/nature.jpg',];

You can't use media queries in the inline style.

You need to check the document with via JS and define your object accordingly

if (window.matchMedia("(min-width: 768px)").matches) {

  carouselItems = [

    'assets/images/nature.jpg',];

} else {

  carouselItems = [

    'assets/images/nature_small.jpg',];

}