带Angular 2打字稿的jssor [英] jssor with Angular 2 Typescript

问题描述

我正在使用Angular 2开发一个网站.

I'm developping a web site with Angular 2.

这时候我已经购买了Jssor的订阅，可以为运行在同一页面中的3个以上分离的滑块生成图像滑块.

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.

我在npmjs.com上找到了jssorslider，但它已经一年了.

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

您是否已获得Angular 2的最新jssor或一些实现它的帮助文档?

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

谢谢

马里奥·奥乔亚(Mario Ochoa)

Mario Ochoa

推荐答案

兄弟我最近在Angular 2中成功使用了Jssor.

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

在您的index.html

必需的JSSOR JS文件. 像这样:-

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>

现在您的component.ts中使用JSSOR这样

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();
    }
}

修改:-

jssor_1_slider_init是已修改的函数名称.下载此JavaScript文件 http://www.ravinderpayal.com/js/minified -player.js 并在此文件中搜索方法名称jssor_1_slider_init.我修改了代码，以便在另一个项目中使用多个jssor滑块.

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.

正在运行的演示:- http://www.ravinderpayal.com/dist

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

这篇关于带Angular 2打字稿的jssor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！