NgxImageSwiper

A relatively simple component for displaying images in a container that can be navigated by mouse, touch and keyboard events with no dependencies, other than Angular of course.

Stackblitz Demo

Installation

npm i ngx-image-swiper --save

Usage

Import NgImageSwiperModule into the required module:

1import { NgImageSwiperModule } from 'ngx-image-swiper';
2
3@NgModule({
4  imports: [
5    NgImageSwiperModule
6  ]
7})

In your component:

1import { Component } from '@angular/core';
2import { NgxSwiperConfig } from 'ngx-image-swiper';
3
4@Component({
5  selector: 'app-root',
6  template: `
7    <!-- put the component in a containing div -->
8    <div class="image-swiper">
9      <ngx-image-swiper [config]="swiperConfig" [images]="images"></ngx-image-swiper>
10    </div>
11  `,
12  styles: [
13    `
14      // position must be relative
15      // width & height can be whatever you want
16      .image-swiper {
17        position: relative;
18        width: 600px;
19        height: 600px;
20      }
21    `
22  ]
23})
24export class AppComponent {
25  swiperConfig: NgxSwiperConfig = {
26    navigationPlacement: 'inside',
27    pagination: true,
28    paginationPlacement: 'outside'
29  };
30
31  images = [
32    'https://images.pexels.com/photos/2387869/pexels-photo-2387869.jpeg',
33    'https://images.pexels.com/photos/2395264/pexels-photo-2395264.jpeg',
34    'https://images.pexels.com/photos/2474014/pexels-photo-2474014.jpeg',
35    'https://images.pexels.com/photos/2440296/pexels-photo-2440296.jpeg',
36    'https://images.pexels.com/photos/2506269/pexels-photo-2506269.jpeg'
37  ];
38}

Inputs & Configuration

The component comes with two inputs, config and images.

config

Here you can pass in the configuration options you want to change from their defaults (explained below).

images

The array of images to pass into the swiper component.

Configuration Options

Ngx-Image-Swiper comes with the following configuration options:

1navigation?: boolean;
2navigationPlacement?: 'inside' | 'outside';
3navigationLeftIcon?: string;
4navigationRightIcon?: string;
5pagination?: boolean;
6paginationPlacement?: 'inside' | 'outside';
7imgBackgroundSize?: string;
8border?: boolean;
9borderRadius?: number;
10swipeThreshold?: number;
11loop?: boolean;
12keyboardNavigation?: boolean;

navigation

Enable/disable left/right button navigation (will only show there is more than 1 image).

• default: true

---

navigationPlacement

Where the navigation buttons should appear, outside the images or inside over the images.

• default: 'outside'
• available options: 'inside' | 'outside

---

navigationLeftIcon & navigationRightIcon

Overwrite the icons used for the background image of the left/right navigation buttons.

---

pagination

Enable/disable the pagination dots (will only show there is more than 1 image).

• default: 'true'

---

paginationPlacement

Where the pagination dots should appear, outside the images or inside over the images.

• default: 'outside'
• available options: 'inside' | 'outside'

---

imgBackgroundSize

Sets the background-size CSS property on the images

• default: 'cover'

---

border

Enable/disable a border around the images

• default: 'true'

---

borderRadius

Sets the border radius on the images. border must be true also.

• default: 4

---

swipeThreshold

Sets a distance threshold images must be dragged to go to the previous/next image otherwise it will remain on the current image.

• default: '50'

---

loop

Enable/disable looping of the images.

• default: 'true'

---

keyboardNavigation

Enable/disable capturing of the left/right arrow keys on the users keyboard to navigation the images.

• default: 'true'

Event Outputs

There is just out output event, imageClick which is fired when the user clicks on any given image. It outputs the index number of the image.