Description

This is an Angular wrapper library for the Swiper

NPM

Install swiper using npm

swiper

npm install ngx-swiper-wrapper --save

Dependencies

No Dependencies for this module.

Includes

import css file in component.scss file

path

@import '~swiper/css/swiper.min.css';

UI-Components Module

Add SwiperModule & swiperComponent into your UIComponentsModule class. ui-components.module.ts would look like this


import {NgModule} from '@angular/core';
import { SwiperModule } from 'ngx-swiper-wrapper';

import { SwiperComponent } from './extra/swiper/swiper.component';

@NgModule({
imports: [SwiperModule],
declarations: [SwiperComponent],
providers: [ ]
})
export class UIComponentsModule { }

Swiper Markup

swiper.component.html would look like this 


  <div class="swiper-default swiper-container" [swiper]="swiperDefaultConfig">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img class="img-fluid" src="assets/img/banner/banner-1.jpg" alt="banner"></div>
        <div class="swiper-slide"><img class="img-fluid" src="assets/img/banner/banner-2.jpg" alt="banner"></div>
        <div class="swiper-slide"><img class="img-fluid" src="assets/img/banner/banner-4.jpg" alt="banner"></div>
        <div class="swiper-slide"><img class="img-fluid" src="assets/img/banner/banner-13.jpg" alt="banner"></div>
        <div class="swiper-slide"><img class="img-fluid" src="assets/img/banner/banner-7.jpg" alt="banner"></div>
    </div>
</div>

Swiper Component

Import SwiperConfigInterface in SwiperComponent class. swiper.component.ts would look like this 


import { Component } from '@angular/core';
import { SwiperDirective, SwiperConfigInterface} from 'ngx-swiper-wrapper';

@Component({
    selector: 'app-swiper',
    templateUrl: './swiper.component.html',
    styleUrls: ['./swiper.component.scss']
})


export class SwiperComponent  {
  public swiperDefaultConfig: SwiperConfigInterface = {};
}