title: Implementing Swiper in Angular 8
body: <p>I am trying to implement <strong>Swiper</strong> in my Angular 8 application: <a href="https://swiperjs.com/get-started/" rel="nofollow noreferrer">https://swiperjs.com/get-started/</a>. </p>
  
  <p>I have created a javascript file in my assets folder and included it into my <code>angular.json</code>. </p>
  
  <p>Also I have included <strong>Swiper</strong> in my <code>app.module.ts</code> and ran the command
  <code>npm install @types/swiper</code>. </p>
  
  <p><strong>However, I get the error:</strong></p>
  
  <p><code>[ts] Module '"../node_modules/@types/swiper/index has no exported member 'Swiper'</code> </p>
  
  <p>when it clearly does. I am not sure where I am going wrong.</p>
  
  <p><strong>card-swipe.component.ts</strong></p>
  
  <pre><code>import { SwiperModule, SwiperConfigInterface } from 'ngx-swiper-wrapper';
  
  
  
  @Component({
    selector: 'app-card-swipe',
    templateUrl: './card-swipe.component.html',
    styleUrls: ['./card-swipe.component.css']
  })
  export class CardSwipeComponent implements OnInit {
  
  
  constructor() { }
  something;
  index;
  config: SwiperConfigInterface = {
    a11y: true,
    direction: 'horizontal',
    slidesPerView: 3,
    slideToClickedSlide: true,
    mousewheel: true,
    scrollbar: false,
    watchSlidesProgress: true,
    navigation: true,
    keyboard: true,
    pagination: false,
    centeredSlides: true,
    loop: true,
    roundLengths: true,
    slidesOffsetBefore: 100,
    slidesOffsetAfter: 100,
    spaceBetween: 50,
    breakpoints: {
        // when window width is &gt;= 320px
        320: {
            slidesPerView: 1
        }
    }
  };
  
  ngOnInit() {}
  
  }
  </code></pre>
  
  <p><strong>card-swipe.component.html</strong></p>
  
  <pre><code>&lt;p&gt;Hi this works&lt;/p&gt;
  &lt;!-- Slider main container --&gt;
  &lt;swiper fxFlex="auto" [config]="config" (indexChange)="onIndexChange($event)"&gt;
      &lt;div *ngFor="let step of something; let index = index" class="swiper-slide cursor-pointer"&gt;
          &lt;div fxLayout="column" fxLayoutAlign="center center" fxFlexFill class="mx-2"&gt;
            &lt;p&gt;hi&lt;/p&gt;
            &lt;h1&gt;hello&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/swiper&gt;
  </code></pre>