jssor with Angular 2 Typescript

Question

I'm developping a web site with Angular 2.

At this time I have purchased the subscription to Jssor to generate image slider for more than 3 separated sliders running into same page.

My current issue is with a dinamic slider that is generated after document load, it isn't shown.

I have found jssorslider in npmjs.com, but it's one year older.

Have you on hand a current jssor for Angular 2 or some helping doc for implementing it?

Thank you

Mario Ochoa

Answer 1

Brother I recently used Jssor, successfully, with Angular 2.

In your index.html

Required JSSOR JS file. Like these:-

  <script src="/js/jssor.slider.min.js" type="text/javascript"></script>
                OR
  <script src="/js/minified-player.js" type="text/javascript"></script>

Now in your component.ts use JSSOR like this

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

declare var jssor_1_slider_init:any;
@Component({
    selector: 'ImageShow',
    template: `
        <div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 900px; max-width: 95%; height: 556px; overflow: hidden; visibility: hidden; background-color: #24262e;">
<!-- Loading Screen -->
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
<div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
</div>
<div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 900px; height: 456px; overflow: hidden;">
<div data-p="144.50" style="display: none;">
<img data-u="image" src="img/1.jpg" />
<img data-u="thumb" src="img/1.jpg" />
</div>
<div data-p="144.50" style="display: none;">
<img data-u="image" src="img/2.jpg" />
<img data-u="thumb" src="img/2.jpg" />
</div>
<div data-p="144.50" style="display: none;">
<img data-u="image" src="img/3.jpg" />
<img data-u="thumb" src="img/3.jpg" />
</div>
<div data-p="144.50" style="display: none;">
<img data-u="image" src="img/4.jpg" />
<img data-u="thumb" src="img/4.jpg" />
</div>
<div data-p="144.50" style="display: none;">
<img data-u="image" src="img/5.jpg" />
<img data-u="thumb" src="img/5.jpg" />
</div>
<div data-p="144.50" style="display: none;">
<img data-u="image" src="img/6.jpg" />
<img data-u="thumb" src="img/6.jpg" />
</div>
<div data-p="144.50" style="display: none;">
<img data-u="image" src="img/7.jpg" />
<img data-u="thumb" src="img/7.jpg" />
</div>
</div>
<!-- Thumbnail Navigator -->
<div data-u="thumbnavigator" class="jssort01" style="position:absolute;left:0px;bottom:0px;width:900px;height:100px;" data-autocenter="1">
<!-- Thumbnail Item Skin Begin -->
<div data-u="slides" style="cursor: default;">
<div data-u="prototype" class="p">
<div class="w">
<div data-u="thumbnailtemplate" class="t"></div>
</div>
<div class="c"></div>
</div>
</div>
<!-- Thumbnail Item Skin End -->
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora05l" style="top:158px;left:8px;width:40px;height:40px;"></span>
<span data-u="arrowright" class="jssora05r" style="top:158px;right:8px;width:40px;height:40px;"></span>
</div>
    `,
})
export class ImageShowComponent implements  AfterViewInit{
    constructor(){
    }
    ngAfterViewInit() {
        jssor_1_slider_init();
    }
}

Edit:-

jssor_1_slider_init is modified function name. Download this JavaScript file http://www.ravinderpayal.com/js/minified-player.js and search for the method name jssor_1_slider_init in this file. The code was modified by me for using multiple jssor slider in another project.

Working demo:- http://www.ravinderpayal.com/dist