title: How to use different(small) image for mobile(small) devices in carousel?
body: <p>I am using <a href="https://github.com/sheikalthaf/ngu-carousel" rel="nofollow noreferrer">ngu-carousel</a> for displaying carousel images for my application.</p>
  
  <p>I am using the below html for the carousel images</p>
  
  <pre><code> &lt;ngu-carousel #myCarousel [inputs]="carouselConfig" [dataSource]="carouselItems" (onMove)="onmoveFn($event)"&gt;
      &lt;ngu-tile *nguCarouselDef="let item;"&gt;
       &lt;div class="tile" [style.background]="'url('+item+')'"&gt;&lt;/div&gt;
      &lt;/ngu-tile&gt;
  </code></pre>
  
  <p>For the simple images loading for different device I used the below code before:</p>
  
  <pre><code>&lt;picture&gt;
      &lt;source srcset="./assets/images/chittu_1400_797.jpg " media="(min-width: 768px)"&gt;
      &lt;img srcset="./assets/images/chittu_700_573.jpg" alt="Coastal view of ocean and mountains"&gt;
    &lt;/picture&gt;
  </code></pre>
  
  <p>How to use media query in the case of carousel which load images like this <code>[style.background]="'url('+item+')'"</code> where carousel items is declared as below</p>
  
  <pre><code>carouselItems = [
      'assets/images/nature.jpg',];
  </code></pre>