在 Angular 组件中配置 Revolution Slider
Configure Revolution Slider in Angular component
我正在使用从 Theme forest 购买的模板作为 angular 应用程序的基础。
我想把这些模板部件做成组件。
正在努力让 Revolution 滑块正常工作。
在模板中 html - 它连接了文档就绪事件上的滑块:
<script>
jQuery(document).ready(function() {
jQuery("#rev_slider_280_1").show().revolution({
sliderType: "hero",
jsFileLocation: "revo-slider/js/",
sliderLayout: "fullscreen",
dottedOverlay: "none",
delay: 9000,
/*navigation: {},*/
responsiveLevels: [1240, 1024, 778, 480],
visibilityLevels: [1240, 1024, 778, 480],
gridwidth: [1240, 1024, 778, 480],
gridheight: [868, 768, 960, 720],
lazyType: "none",
parallax: {
type: "off",
origo: "slidercenter",
speed: 1000,
levels: [0],
type: "scroll",
disable_onmobile: "on"
},
shadow: 0,
spinner: "spinner2",
autoHeight: "off",
fullScreenAutoWidth: "off",
fullScreenAlignForce: "off",
fullScreenOffsetContainer: "",
fullScreenOffset: "",
disableProgressBar: "on",
hideThumbsOnMobile: "off",
hideSliderAtLimit: 0,
hideCaptionAtLimit: 0,
hideAllCaptionAtLilmit: 0,
debugMode: false,
fallbacks: {
simplifyAll: "off",
disableFocusListener: false,
}
});
}); /*ready*/
</script>
遵循 Angular 中的类似方法将使用 OnInit 生命周期挂钩。
我引用了 jQuery 并捕获了 DOM 元素。
问题是我不知道如何获取对 Revolution 库的引用。
此代码出现编译时错误(属性 'Revolution' 在 Jquery 上不存在:
import {Component, ElementRef, OnInit} from '@angular/core';
import * as $ from 'jquery';
@Component({
selector: 'pm-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'pm';
constructor(private element: ElementRef) {}
ngOnInit(): void {
$(this.element.nativeElement).show().revolution({
sliderType: "hero",
jsFileLocation: "revo-slider/js/",
sliderLayout: "fullscreen",
dottedOverlay: "none",
delay: 9000,
/*navigation: {},*/
responsiveLevels: [1240, 1024, 778, 480],
visibilityLevels: [1240, 1024, 778, 480],
gridwidth: [1240, 1024, 778, 480],
gridheight: [868, 768, 960, 720],
lazyType: "none",
parallax: {
type: "off",
origo: "slidercenter",
speed: 1000,
levels: [0],
type: "scroll",
disable_onmobile: "on"
},
shadow: 0,
spinner: "spinner2",
autoHeight: "off",
fullScreenAutoWidth: "off",
fullScreenAlignForce: "off",
fullScreenOffsetContainer: "",
fullScreenOffset: "",
disableProgressBar: "on",
hideThumbsOnMobile: "off",
hideSliderAtLimit: 0,
hideCaptionAtLimit: 0,
hideAllCaptionAtLilmit: 0,
debugMode: false,
fallbacks: {
simplifyAll: "off",
disableFocusListener: false,
}
});
}
}
请像下面这样使用 AfterViewInit 挂钩而不是 OnInit:
import {Component, ElementRef, OnInit, AfterViewInit} from '@angular/core';
import * as $ from 'jquery';
@Component({
selector: 'pm-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
title = 'pm';
constructor(private element: ElementRef) {}
ngAfterViewInit(): void {
$(this.element.nativeElement).show().revolution({
sliderType: "hero",
jsFileLocation: "revo-slider/js/",
sliderLayout: "fullscreen",
dottedOverlay: "none",
delay: 9000,
/*navigation: {},*/
responsiveLevels: [1240, 1024, 778, 480],
visibilityLevels: [1240, 1024, 778, 480],
gridwidth: [1240, 1024, 778, 480],
gridheight: [868, 768, 960, 720],
lazyType: "none",
parallax: {
type: "off",
origo: "slidercenter",
speed: 1000,
levels: [0],
type: "scroll",
disable_onmobile: "on"
},
shadow: 0,
spinner: "spinner2",
autoHeight: "off",
fullScreenAutoWidth: "off",
fullScreenAlignForce: "off",
fullScreenOffsetContainer: "",
fullScreenOffset: "",
disableProgressBar: "on",
hideThumbsOnMobile: "off",
hideSliderAtLimit: 0,
hideCaptionAtLimit: 0,
hideAllCaptionAtLilmit: 0,
debugMode: false,
fallbacks: {
simplifyAll: "off",
disableFocusListener: false,
}
});
}
}
我正在使用从 Theme forest 购买的模板作为 angular 应用程序的基础。
我想把这些模板部件做成组件。
正在努力让 Revolution 滑块正常工作。
在模板中 html - 它连接了文档就绪事件上的滑块:
<script>
jQuery(document).ready(function() {
jQuery("#rev_slider_280_1").show().revolution({
sliderType: "hero",
jsFileLocation: "revo-slider/js/",
sliderLayout: "fullscreen",
dottedOverlay: "none",
delay: 9000,
/*navigation: {},*/
responsiveLevels: [1240, 1024, 778, 480],
visibilityLevels: [1240, 1024, 778, 480],
gridwidth: [1240, 1024, 778, 480],
gridheight: [868, 768, 960, 720],
lazyType: "none",
parallax: {
type: "off",
origo: "slidercenter",
speed: 1000,
levels: [0],
type: "scroll",
disable_onmobile: "on"
},
shadow: 0,
spinner: "spinner2",
autoHeight: "off",
fullScreenAutoWidth: "off",
fullScreenAlignForce: "off",
fullScreenOffsetContainer: "",
fullScreenOffset: "",
disableProgressBar: "on",
hideThumbsOnMobile: "off",
hideSliderAtLimit: 0,
hideCaptionAtLimit: 0,
hideAllCaptionAtLilmit: 0,
debugMode: false,
fallbacks: {
simplifyAll: "off",
disableFocusListener: false,
}
});
}); /*ready*/
</script>
遵循 Angular 中的类似方法将使用 OnInit 生命周期挂钩。
我引用了 jQuery 并捕获了 DOM 元素。
问题是我不知道如何获取对 Revolution 库的引用。
此代码出现编译时错误(属性 'Revolution' 在 Jquery 上不存在:
import {Component, ElementRef, OnInit} from '@angular/core';
import * as $ from 'jquery';
@Component({
selector: 'pm-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'pm';
constructor(private element: ElementRef) {}
ngOnInit(): void {
$(this.element.nativeElement).show().revolution({
sliderType: "hero",
jsFileLocation: "revo-slider/js/",
sliderLayout: "fullscreen",
dottedOverlay: "none",
delay: 9000,
/*navigation: {},*/
responsiveLevels: [1240, 1024, 778, 480],
visibilityLevels: [1240, 1024, 778, 480],
gridwidth: [1240, 1024, 778, 480],
gridheight: [868, 768, 960, 720],
lazyType: "none",
parallax: {
type: "off",
origo: "slidercenter",
speed: 1000,
levels: [0],
type: "scroll",
disable_onmobile: "on"
},
shadow: 0,
spinner: "spinner2",
autoHeight: "off",
fullScreenAutoWidth: "off",
fullScreenAlignForce: "off",
fullScreenOffsetContainer: "",
fullScreenOffset: "",
disableProgressBar: "on",
hideThumbsOnMobile: "off",
hideSliderAtLimit: 0,
hideCaptionAtLimit: 0,
hideAllCaptionAtLilmit: 0,
debugMode: false,
fallbacks: {
simplifyAll: "off",
disableFocusListener: false,
}
});
}
}
请像下面这样使用 AfterViewInit 挂钩而不是 OnInit:
import {Component, ElementRef, OnInit, AfterViewInit} from '@angular/core';
import * as $ from 'jquery';
@Component({
selector: 'pm-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
title = 'pm';
constructor(private element: ElementRef) {}
ngAfterViewInit(): void {
$(this.element.nativeElement).show().revolution({
sliderType: "hero",
jsFileLocation: "revo-slider/js/",
sliderLayout: "fullscreen",
dottedOverlay: "none",
delay: 9000,
/*navigation: {},*/
responsiveLevels: [1240, 1024, 778, 480],
visibilityLevels: [1240, 1024, 778, 480],
gridwidth: [1240, 1024, 778, 480],
gridheight: [868, 768, 960, 720],
lazyType: "none",
parallax: {
type: "off",
origo: "slidercenter",
speed: 1000,
levels: [0],
type: "scroll",
disable_onmobile: "on"
},
shadow: 0,
spinner: "spinner2",
autoHeight: "off",
fullScreenAutoWidth: "off",
fullScreenAlignForce: "off",
fullScreenOffsetContainer: "",
fullScreenOffset: "",
disableProgressBar: "on",
hideThumbsOnMobile: "off",
hideSliderAtLimit: 0,
hideCaptionAtLimit: 0,
hideAllCaptionAtLilmit: 0,
debugMode: false,
fallbacks: {
simplifyAll: "off",
disableFocusListener: false,
}
});
}
}