Как интегрировать angular2-полезный-swiper

#angular #swiper

#angular #swiper.js

Вопрос:

     ORIGINAL EXCEPTION: ReferenceError: Swiper is not defined
ORIGINAL STACKTRACE:
ReferenceError: Swiper is not defined
    at SwiperComponent.ngOnInit (http://localhost:3000/main.bundle.js:20818:28)
    at DebugAppView._View_Home0.detectChangesInternal (Home.ngfactory.js:8303:84)
    at DebugAppView.AppView.detectChanges (http://localhost:3000/vendor.bundle.js:57290:15)
    at DebugAppView.detectChanges (http://localhost:3000/vendor.bundle.js:57396:45)

Это выдает мне эту ошибку после выполнения всего процесса. Не понимаю, что происходит. Также в репозитории GitHub в этом конкретном случае много ошибок.

https://www.npmjs.com/package/angular2-useful-swiper

Ответ №1:

Для этого выполните следующие действия (также описанные в документации angular2-полезный-swiper):

 npm install --save angular2-useful-swiper

npm install --save swiper@3.4.2

затем добавьте js и css в angular-cli.json:

 "styles": [
    "styles.css",
    "../node_modules/swiper/dist/css/swiper.css"        
],
"scripts": [
    "../node_modules/swiper/dist/js/swiper.js"                
],

После этого импортируйте SwiperModule на соответствующем уровне в ваше приложение.

Например, в app.module.ts:

 import { NgModule }       from '@angular/core';

import { SwiperModule } from 'angular2-useful-swiper';

import { AppComponent }   from './app.component';
import { DemoComponent }   from './demo.component';

@NgModule({
    imports: [
        SwiperModule
    ],
    declarations: [
        AppComponent,
        DemoComponent
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Затем вставьте компонент swiper в компонент, чтобы создать слайдер и добавить содержимое:

 <my-component>
   <swiper [config]="config">
    <div class="swiper-wrapper">
        <div class="swiper-slide">HERE GOES SELECTOR 1</div>
            <div class="swiper-slide">HERE GOES SELECTOR 2</div>
            <div class="swiper-slide">HERE GOES SELECTOR 3</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </swiper>
</my-component>

Установите конфигурацию для swiper в компоненте и привяжите ее к свойству конфигурации компонента, как указано выше:

 export class MyComponent implements OnInit {

    config: SwiperOptions = {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 30
    };

Установите высоту и ширину компонента. Он может быть нацелен на его имя, swiper.

 swiper{
    height: 300px;
    width: 400px;
}

После выполнения предыдущих шагов, если вы получите:

ОШИБКА ReferenceError: Swiper не определен

Просто добавьте вручную Swiper 3.4.2 на одну страницу:

 <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js"></script>

1. нам все еще нужен пакет swiper для последней версии ngx-полезный-swiper?

2. @pranabw Только что узнал, что angular2-полезный-swiper устарел и переименован в ngx-полезный-swiper . Не используя его на самом деле, я бы сказал, что процедура такая же / очень похожа на ту, которую я упоминаю в ответе. Если вы получаете ошибку ReferenceError, в которой говорится, что Swiper не определен, тогда да, добавьте Swiper вручную на одну страницу.

Ответ №2:

Шаг 1

Добавьте Swiper на свою отдельную страницу

 <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.js"></script>

…

Пример плунжера

Ответ №3:

Установить

 npm install --save angular2-useful-swiper

Настройка

Добавьте Swiper на свою отдельную страницу

   <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.js"></script>

После этого объявите его в своем app.module.ts

 @NgModule({
    imports: [
        // your other imports
        SwiperModule
    ],
    declarations: [
        // your declarations
        DemoComponent
    ],
    bootstrap: [AppComponent]
})

Теперь должно работать 👌🏻

https://www.npmjs.com/package/angular2-useful-swiper