Add Swiped Carousel and other plugins by npm install

Disclamer: Using jQuery is not recommended

Swiper (getting starter)

You can use jQuery or not. Just read getting starter and choose method.

If you want to use It with jQuery, read that issue.

Also read Universal «Gotchas».

1. npm install swiper

2. In your project folder ... /src/client.ts add import 'swiper'; on the top.

// the polyfills must be the first thing imported
import 'angular2-universal-polyfills';
import 'ts-helpers';
import './__workaround.browser'; // temporary until 2.1.1 things are patched in Core

import 'swiper'; // !!!!!!!!!!!

// Angular 2
import { enableProdMode } from '@angular/core';
import { platformUniversalDynamic } from 'angular2-universal/browser';
import { bootloader } from '@angularclass/bootloader';
.....

3. In your any.component.ts you should import isBrowser, jquery and declare variable Swiper.

import { Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';

import { isBrowser } from 'angular2-universal';

import * as $ from 'jquery'; // ADD THIS to include jQuery
declare var Swiper:any; // ADD THIS

@Component({
  changeDetection: ChangeDetectionStrategy.Default,
  encapsulation: ViewEncapsulation.Emulated,
  selector: 'any',
  templateUrl: './any.component.html',
})
export class AnyComponent {

  constructor() {

    // we need the data synchronously for the client to set the server response
    // we create another method so we have more control for testing
    this.universalInit();
  }


  universalInit() {

    if(isBrowser) {
      $(document).ready(function () {
        //initialize swiper when document ready
        var mySwiper = new Swiper ('.swiper-container', {
          // Optional parameters
          direction: 'vertical',
          loop: true
        })
      });
    }

  }

}

Use if(isBrowser) { ... js code ... } to include your external code. You can include isBrowser in ngOnInit() also.

Use declare var Swiper:any; to fix compiler error:

Cannot find name 'Swiper'.