web-dev-qa-db-ja.com

Angular 8でのスワイパーの実装

私はSwiperを実装しようとしていますAngular 8アプリケーション： https://swiperjs.com/get-started / 。

アセットフォルダーにJavaScriptファイルを作成し、それをangular.jsonに含めました。

また、私はSwiperをapp.module.tsに含めて、コマンドnpm install @types/swiperを実行しました。

ただし、エラーが表示されます：

[ts] Module '"../node_modules/@types/swiper/index has no exported member 'Swiper'

明らかにそうなのです。どこが悪いのかわかりません。

card-swipe.component.ts

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 >= 320px
      320: {
          slidesPerView: 1
      }
  }
};

ngOnInit() {}

}

card-swipe.component.html

<p>Hi this works</p>
<!-- Slider main container -->
<swiper fxFlex="auto" [config]="config" (indexChange)="onIndexChange($event)">
    <div *ngFor="let step of something; let index = index" class="swiper-slide cursor-pointer">
        <div fxLayout="column" fxLayoutAlign="center center" fxFlexFill class="mx-2">
          <p>hi</p>
          <h1>hello</h1>
        </div>
    </div>
</swiper>
angularnpmswiper
1
Jonathan

AngularアプリケーションでSwiperを使用しています。

統合方法：Angular専用のnpmパッケージがあります： https://www.npmjs.com/package/ngx-swiper-wrapper

したがって、基本的にはパッケージをインストールする必要があります：

npm i ngx-swiper-wrapper

次に、モジュールをインポートします（これをSharedModuleに入れてエクスポートしたため、どこからでもアクセスできます：

imports: [
    // more imports here
    SwiperModule
]

その後、次のようにコンポーネントで使用できます。

<swiper fxFlex="auto" [config]="config" (indexChange)="onIndexChange($event)">
    <div *ngFor="let step of something; let index = index" class="swiper-slide cursor-pointer">
        <div fxLayout="column" fxLayoutAlign="center center" fxFlexFill class="mx-2">
            <!-- Your content goes here -->
        </div>
    </div>
</swiper>

構成として、次のようなものを作成できます。

    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 >= 320px
            320: {
                slidesPerView: 1
            }
        }
    };

angular.jsonファイルにスタイルを含める必要はありません。これらはすべて、インポートしたモジュールに付属しています。

0
dave0688