I have a slider within a component and I would like to display it on load, it is a revolutionslider and its giving the error Property 'revolution' does not exist on type 'JQuery'.ts
In my HomeComponent.ts I have placed the jquery that is needed and I have imported the jquery modules using the command npm install jquery
.In addition I have also placed the line of code in angular.json to reference the installed module
"scripts": [
"./node_modules/jquery/dist/jquery.min.js"
]
Home.Component.ts
import { AfterViewInit, Component, ElementRef,OnInit, ViewEncapsulation } from '@angular/core';
import * as $ from 'jquery';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: [ './extras.min.css', './corporate.min.css','./theme.min.css','./bootstrap.min.css'],
encapsulation: ViewEncapsulation.ShadowDom
})
export class HomeComponent implements AfterViewInit {
constructor(private element: ElementRef) {}
ngAfterViewInit(): void {
// let elem: any;
//elem = $('.tp-banner');
//elem.show().revolution()({
$(this.element.nativeElement).show().revolution()({
//jQuery('.tp-banner').show().revolution(
//{
delay: 7000,
startwidth: 1170,
startheight: 480,
onHoverStop: "on", // Stop Banner Timer at Hover on Slide on/off
thumbWidth: 100, // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
thumbHeight: 50,
thumbAmount: 3,
hideThumbs: 0,
navigationType: "bullet", // bullet, thumb, none
navigationArrows: "solo", // nexttobullets, solo (old name verticalcentered), none
navigationStyle: "round", // round,square,navbar,round-old,square-old,navbar-old, or any from the list in the docu (choose between 50+ different item), custom
navigationHAlign: "center", // Vertical Align top,center,bottom
navigationVAlign: "bottom", // Horizontal Align left,center,right
navigationHOffset: 0,
navigationVOffset: 20,
soloArrowLeftHalign: "left",
soloArrowLeftValign: "center",
soloArrowLeftHOffset: 20,
soloArrowLeftVOffset: 0,
soloArrowRightHalign: "right",
soloArrowRightValign: "center",
soloArrowRightHOffset: 20,
soloArrowRightVOffset: 0,
touchenabled: "on", // Enable Swipe Function : on/off
stopAtSlide: -1, // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.
stopAfterLoops: -1, // Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic
hideCaptionAtLimit: 0, // It Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of Browser)
hideAllCaptionAtLilmit: 0, // Hide all The Captions if Width of Browser is less then this value
hideSliderAtLimit: 0, // Hide the whole slider, and stop also functions if Width of Browser is less than this value
fullWidth: "on",
shadow: 0
})
}
}
Home.Componet.html
<footer id="footer">
<section class="section subfooter">
<div class="container">
<div class="row element-top-10 element-bottom-10">
<div class="col-sm-12">
<div class="sidebar-widget widget_text">
<div class="textwidget">Online © 2020</div>
</div>
</div>
</div>
</div>
</section>
</footer>
<!--</div>-->
<a class="go-top go-top-circle" href="javascript:void(0)"> <i class="fa fa-angle-up"></i> </a>
<script type="text/javascript">
var oxyThemeData = {
navbarHeight: 100,
navbarScrolled: 90,
navbarScrolledPoint: 20,
menuClose: 'off',
scrollFinishedMessage: 'No more items to load.',
hoverMenu:
{
hoverActive: false,
hoverDelay: 1,
hoverFadeDelay: 200
},
siteLoader: 'on'
};
</script>
<script src="assets/scripts/theme.js"></script>
<script src="assets/scripts/revolution.min.js"></script>
