error TS2304: Cannot find name 'SwiperOptions'.

[Hess-Gregory]

component.html

<swiper [config]="config">
   <div class="swiper-wrapper">
     <div class="swiper-slide">Slide 1</div>
     <div class="swiper-slide">Slide 2</div>
     <div class="swiper-slide">Slide 3</div>
     <div class="swiper-slide">Slide 4</div>
     <div class="swiper-slide">Slide 5</div>
     <div class="swiper-slide">Slide 6</div>
     <div class="swiper-slide">Slide 7</div>
     <div class="swiper-slide">Slide 8</div>
     <div class="swiper-slide">Slide 9</div>
     <div class="swiper-slide">Slide 10</div>
   </div>
   <!-- Add Pagination -->
   <div class="swiper-pagination"></div>
   <!-- Add Arrows -->
   <div class="swiper-button-next"></div>
   <div class="swiper-button-prev"></div>
 </swiper>

component.ts:

config: SwiperOptions = {
   autoplay: 3000, // Autoplay option having value in milliseconds
   initialSlide: 3, // Slide Index Starting from 0
   slidesPerView: 3, // Slides Visible in Single View Default is 1
   pagination: '.swiper-pagination', // Pagination Class defined
   paginationClickable: true, // Making pagination dots clicable
   nextButton: '.swiper-button-next', // Class for next button
   prevButton: '.swiper-button-prev', // Class for prev button
   spaceBetween: 30 // Space between each Item
 };

component.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgxUsefulSwiperModule } from 'ngx-useful-swiper';

@NgModule({
  imports: [
    CommonModule, 
    NgxUsefulSwiperModule
 ],

angular.json

      "styles": [
           "node_modules/font-awesome/css/font-awesome.css",
           "node_modules/bootstrap/dist/css/bootstrap.min.css",
           "node_modules/swiper/css/swiper.css",
           "src/styles/app.scss"
         ],
         "scripts": [
           "node_modules/jquery/dist/jquery.min.js",
           "node_modules/popper.js/dist/umd/popper.min.js",
           "node_modules/chart.js/dist/chart.js",
           "node_modules/quill/dist/quill.js",
           "node_modules/hammerjs/hammer.min.js",
           "node_modules/bootstrap/dist/js/bootstrap.min.js",
           "node_modules/swiper/js/swiper.js"  
         ]

node npm install:

@types/[email protected] &

• [email protected]
• [email protected]

[vladigeras]

Try to add next import in component.ts: import {SwiperOptions} from 'swiper';

But you should use the next generation of library instead of current: https://github.com/JayChase/ngx-useful-swiper

Npmjs said next: angular2-useful-swiper "This package has been deprecated This package has now been renamed to ngx-useful-swiper please use that package from now on"