title: Several Swiper sliders on same Angular app/component?
body: <p>I using <a href="https://swiperjs.com/api/" rel="nofollow noreferrer">Swiper</a> to add sliders to my Angular (7) app.</p>
  
  <p>The problem is that I don't manage to have separate sliders on the same app, even if not in the same component.</p>
  
  <p>The Swiper doc tells this, when you are using it with vanilla JS:</p>
  
  <pre><code>var mySwiper = new Swiper('.swiper-container', {
    speed: 400,
    spaceBetween: 100
  });
  </code></pre>
  
  <p>In my Angular app, I have this in the .ts file:</p>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  import { ProductItemVM } from 'src/app/models/product/product-item-vm';
  import { SwiperConfigInterface } from 'ngx-swiper-wrapper';
  
  @Component({
    selector: 'srp-product-carousel-container',
    templateUrl: './product-carousel-container.component.html',
    styleUrls: ['./product-carousel-container.component.scss']
  })
  
  export class ProductCarouselContainerComponent implements OnInit {
  @Input() productList: ProductItemVM[];
  
  public config: SwiperConfigInterface = {
  direction: 'horizontal',
  threshold: 0,
  spaceBetween: 20,
  slidesPerView: 1,
  keyboard: true,
  mousewheel: false,
  scrollbar: false,
  navigation: true,
  pagination: true
  };
  
  constructor() { }
  
  ngOnInit() {}
  }
  </code></pre>
  
  <p>Here is the <a href="https://www.npmjs.com/package/ngx-swiper-wrapper" rel="nofollow noreferrer">doc for Angular wrapper of Swiper</a>.</p>
  
  <p>I can't declare a new slider, and so I can't call another swiper-container class to aim different sliders.</p>
  
  <p>Does somebody ever had this problem and found a way to solve it?
  Thanks.</p>