I am using a template purchased from Theme forest as the basis for an angular app.
I want to make these template parts into components.
Struggling to get a Revolution slider working.
In the template html - it wires up the the slider on the document ready event:
<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>
following a similar approach in Angular would use the OnInit lifecycle hook.
I have referenced jQuery and capture the DOM element.
The problem is the I do not know how to get a reference to the Revolution library.
I get a compile time error with this code (Property 'Revolution' does not exist on 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,
}
});
}
}
please use AfterViewInit hook instead of OnInit like below:
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,
}
});
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With