I'm using Revolution Slider in my Slider.component. When I first go to the home page its working fine. But when I go to inner page and come back to home, the Revolution Slider disappear and when I refresh the page, it shows again.
I copied all the code from jquery and paste it into AfterViewInit() but now I'm getting some errors with $ and I don't know how to fix it.
I want it to display without refreshing the page.
Slider.component.ts
import { Component, OnInit, AfterViewInit, ElementRef } from '@angular/core';
import * as $ from 'jquery';
@Component({
selector: 'app-slider',
templateUrl: './slider.component.html',
styleUrls: ['./slider.component.css']
})
export class SliderComponent implements OnInit, AfterViewInit {
constructor(private element: ElementRef) { }
ngOnInit(): void {
}
ngAfterViewInit(): void {
$('#rev_slider_779_1').show().revolution(
{
sliderType: "standard",
jsFileLocation: "assets/include/rs-plugin/js/",
dottedOverlay: "none",
sliderLayout: "fullwidth",
delay: 9000,
responsiveLevels: [1240, 1024, 778, 480],
visibilityLevels: [1240, 1024, 778, 480],
gridwidth: [1200, 1024, 778, 480],
gridheight: [700, 768, 960, 720],
hideThumbs: 200,
thumbWidth: 100,
thumbHeight: 50,
thumbAmount: 3,
touchenabled: "on",
onHoverStop: "on",
swipe_velocity: 0.7,
swipe_min_touches: 1,
swipe_max_touches: 1,
drag_block_vertical: false,
navigation: {
keyboardNavigation: "off",
keyboard_direction: "horizontal",
mouseScrollNavigation: "off",
onHoverStop: "off",
touch: {
touchenabled: "on",
swipe_threshold: 75,
swipe_min_touches: 1,
swipe_direction: "horizontal",
drag_block_vertical: false
},
arrows: {
style: "hades",
enable: true,
hide_onmobile: false,
hide_onleave: false,
tmp: '<div class="tp-arr-allwrapper"> <div class="tp-arr-imgholder"></div></div>',
left: {
h_align: "left",
v_align: "center",
h_offset: 10,
v_offset: 0
},
right: {
h_align: "right",
v_align: "center",
h_offset: 10,
v_offset: 0
}
},
thumbnails: {
style: "hades",
enable: true,
width: 50,
height: 50,
min_width: 100,
wrapper_padding: 5,
wrapper_color: "transparent",
wrapper_opacity: "1",
tmp: '<span class="tp-thumb-img-wrap"> <span class="tp-thumb-image"></span></span>',
visibleAmount: 5,
hide_onmobile: false,
hide_onleave: false,
direction: "horizontal",
span: false,
position: "inner",
space: 5,
h_align: "center",
v_align: "bottom",
h_offset: 0,
v_offset: 20
}
},
soloArrowLeftHalign: "left",
soloArrowLeftValign: "center",
soloArrowLeftHOffset: 20,
soloArrowLeftVOffset: 0,
soloArrowRightHalign: "right",
soloArrowRightValign: "center",
soloArrowRightHOffset: 20,
soloArrowRightVOffset: 0,
shadow: 0,
fullWidth: "off",
fullScreen: "on",
spinner: "spinner0",
stopLoop: "off",
stopAfterLoops: -1,
stopAtSlide: -1,
shuffle: "off",
forceFullWidth: "off",
fullScreenAlignForce: "off",
hideThumbsOnMobile: "off",
hideNavDelayOnMobile: 1500,
hideBulletsOnMobile: "off",
hideArrowsOnMobile: "off",
hideThumbsUnderResolution: 0,
hideSliderAtLimit: 0,
hideCaptionAtLimit: 0,
hideAllCaptionAtLilmit: 0,
startWithSlide: 0,
});
}
}
Slider.component.html
<section id="slider" class="slider-element slider-parallax revslider-wrap min-vh-0 assets/include-header">
<div class="slider-inner">
<div id="rev_slider_779_1_wrapper" class="rev_slider_wrapper fullwidth-container" data-alias="default-slider"
style="padding:0px;">
<div id="rev_slider_779_1" class="rev_slider fullwidthbanner" style="display:none;" data-version="5.1.4">
<ul>
<li class="dark" data-transition="slidehorizontal" data-slotamount="1" data-masterspeed="1000"
data-thumb="assets/include/rs-plugin/demos/assets/images//iceberg-250x100.jpg" data-fstransition="fade"
data-fsmasterspeed="1000" data-fsslotamount="7" data-saveperformance="off"
data-title="Welcome to Canvas">
<img src="assets/include/rs-plugin/demos/assets/images/iceberg.jpg" alt="video_woman_cover3"
data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat">
<div class="tp-fade fadeout fullscreenvideo rs-background-video-layer" data-forcerewind="on"
data-volume="mute" data-videowidth="100%" data-videoheight="100%"
data-videomp4="assets/include/rs-plugin/demos/assets/videos/iceberg.mp4"
data-videopreload="preload" data-videoloop="none" data-forceCover="1"
data-aspectratio="16:9" data-autoplay="true" data-autoplayonlyfirsttime="false"
data-nextslideatend="true" style="z-index: 2;">
</div>
<div class="tp-caption customin ltl tp-resizeme revo-slider-caps-text text-uppercase"
data-x="['left','left','left','left']" data-hoffset="['600','50','50','30']"
data-y="['top','top','top','top']" data-voffset="['235','235','235','235']"
data-transform_in="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;s:800;e:Power4.easeOutQuad;"
data-speed="800" data-start="1000" data-easing="easeOutQuad" data-splitin="none"
data-splitout="none" data-elementdelay="0.01" data-endelementdelay="0.1"
data-endspeed="1000" data-endeasing="Power4.easeIn"
style="z-index: 3; color: #FFF; white-space: nowrap;">Hello There!</div>
<div class="tp-caption customin ltl tp-resizeme revo-slider-emphasis-text p-0 border-0"
data-x="['left','left','left','left']" data-hoffset="['600','50','50','30']"
data-y="['top','top','top','top']" data-voffset="['260','260','260','260']"
data-fontsize="['60','60','44','44']"
data-transform_in="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;s:800;e:Power4.easeOutQuad;"
data-speed="800" data-start="1200" data-easing="easeOutQuad" data-splitin="none"
data-splitout="none" data-elementdelay="0.01" data-endelementdelay="0.1"
data-endspeed="1000" data-endeasing="Power4.easeIn"
style="z-index: 3; color: #FFF; font-size: 60px; white-space: nowrap;">Welcome to
Canvas</div>
<div class="tp-caption customin ltl tp-resizeme revo-slider-desc-text text-start"
data-x="['left','left','left','left']" data-hoffset="['600','50','50','30']"
data-y="['top','top','top','top']" data-voffset="['360','360','360','360']"
data-transform_in="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;s:800;e:Power4.easeOutQuad;"
data-speed="800" data-start="1600" data-easing="easeOutQuad" data-splitin="none"
data-width="['550','550','480','360']" data-splitout="none" data-elementdelay="0.01"
data-endelementdelay="0.1" data-endspeed="1000" data-endeasing="Power4.easeIn"
style="z-index: 3; color: #FFF; max-width: 550px; white-space: normal;">The most
Beautiful & Performance Friendly Theme available on the Envato Marketplaces.
</div>
<div class="tp-caption customin ltl tp-resizeme" data-x="['left','left','left','left']"
data-hoffset="['600','50','50','30']" data-y="['top','top','top','top']"
data-voffset="['470','470','470','470']"
data-transform_in="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;s:800;e:Power4.easeOutQuad;"
data-speed="800" data-start="1550" data-easing="easeOutQuad" data-splitin="none"
data-splitout="none" data-elementdelay="0.01" data-endelementdelay="0.1"
data-endspeed="1000" data-endeasing="Power4.easeIn" style="z-index: 3;"><a href="#"
class="button button-border button-large button-light button-rounded text-end m-0"><span>Start
Tour</span><i class="icon-angle-right"></i></a></div>
</li>
<li class="dark" data-transition="slidehorizontal" data-slotamount="1" data-masterspeed="1000"
data-thumb="assets/include/rs-plugin/demos/assets/images/space_cover-250x100.jpg"
data-saveperformance="off" data-title="Mobile Ready Design">
<img src="assets/include/rs-plugin/demos/assets/images/space_cover.jpg" alt="video_typing_cover"
data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat">
<div class="tp-fade fadeout fullscreenvideo rs-background-video-layer" data-forcerewind="on"
data-volume="mute" data-videowidth="100%" data-videoheight="100%"
data-videomp4="assets/include/rs-plugin/demos/assets/videos/space.mp4" data-videopreload="preload"
data-videoloop="none" data-forceCover="1" data-aspectratio="16:9" data-autoplay="true"
data-autoplayonlyfirsttime="false" data-nextslideatend="true">
</div>
<div class="tp-caption customin ltl tp-resizeme revo-slider-emphasis-text text-uppercase"
data-x="center" data-hoffset="0" data-y="top" data-voffset="235"
data-fontsize="['60','60','46','38']"
data-transform_in="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;s:800;e:Power4.easeOutQuad;"
data-speed="800" data-start="1000" data-easing="easeOutQuad" data-splitin="none"
data-splitout="none" data-elementdelay="0.01" data-endelementdelay="0.1"
data-endspeed="1000" data-textAlign="center" data-endeasing="Power4.easeIn"
style="z-index: 3; white-space: nowrap;">Mobile Ready Design</div>
<div class="tp-caption customin ltl tp-resizeme revo-slider-desc-text" data-x="center"
data-hoffset="0" data-y="top" data-voffset="400" data-width="['650','650','480','360']"
data-transform_in="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;s:800;e:Power4.easeOutQuad;"
data-speed="800" data-start="1200" data-easing="easeOutQuad" data-splitin="none"
data-splitout="none" data-elementdelay="0.01" data-endelementdelay="0.1"
data-endspeed="1000" data-textAlign="center" data-endeasing="Power4.easeIn"
style="z-index: 3; max-width: 650px; white-space: normal;">Completely Responsive
& Retina Ready Design built on the amazing Bootstrap Framework.</div>
<div class="tp-caption customin ltl tp-resizeme" data-x="center" data-hoffset="0" data-y="top"
data-voffset="503"
data-transform_in="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;s:800;e:Power4.easeOutQuad;"
data-speed="800" data-start="1350" data-easing="easeOutQuad" data-splitin="none"
data-splitout="none" data-elementdelay="0.01" data-endelementdelay="0.1"
data-endspeed="1000" data-endeasing="Power4.easeIn" style="z-index: 3;"><a href="#"
class="button button-border button-white button-light button-large button-rounded text-end m-0"><span>Read
More</span><i class="icon-angle-right"></i></a></div>
</li>
<li class="dark" data-transition="slidehorizontal" data-slotamount="1" data-masterspeed="1000"
data-thumb="images/slider/rev/main/s1-thumb.jpg" data-saveperformance="off"
data-title="Infinite Possibilities">
<img src="images/videos/explore-poster.jpg" alt="video_space_cover"
data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat">
<div class="tp-fade fadeout fullscreenvideo rs-background-video-layer" data-forcerewind="on"
data-volume="mute" data-videowidth="100%" data-videoheight="100%"
data-videomp4="images/videos/explore.mp4" data-videopreload="preload" data-videoloop="none"
data-forceCover="1" data-aspectratio="16:9" data-autoplay="true"
data-autoplayonlyfirsttime="false" data-nextslideatend="true">
</div>
<div class="tp-caption customin ltl tp-resizeme revo-slider-caps-text text-uppercase"
data-x="center" data-hoffset="0" data-y="top" data-voffset="235"
data-transform_in="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;s:800;e:Power4.easeOutQuad;"
data-speed="800" data-start="1000" data-easing="easeOutQuad" data-splitin="none"
data-splitout="none" data-elementdelay="0.01" data-endelementdelay="0.1"
data-endspeed="1000" data-endeasing="Power4.easeIn"
style="z-index: 3; white-space: nowrap;">Why Choose Canvas?</div>
<div class="tp-caption customin ltl tp-resizeme revo-slider-emphasis-text p-0 border-0"
data-x="center" data-hoffset="0" data-y="top" data-voffset="260"
data-fontsize="['60','60','46','38']"
data-transform_in="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;s:800;e:Power4.easeOutQuad;"
data-speed="800" data-start="1200" data-easing="easeOutQuad" data-splitin="none"
data-splitout="none" data-elementdelay="0.01" data-endelementdelay="0.1"
data-endspeed="1000" data-textAlign="center" data-endeasing="Power4.easeIn"
style="z-index: 3; white-space: nowrap;">Unlimited Possibilities</div>
<div class="tp-caption customin ltl tp-resizeme revo-slider-desc-text" data-x="center"
data-hoffset="0" data-y="top" data-voffset="370" data-width="['650','650','480','360']"
data-transform_in="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;s:800;e:Power4.easeOutQuad;"
data-speed="800" data-start="1400" data-easing="easeOutQuad" data-splitin="none"
data-splitout="none" data-elementdelay="0.01" data-endelementdelay="0.1"
data-endspeed="1000" data-textAlign="center" data-endeasing="Power4.easeIn"
style="z-index: 3; max-width: 650px; white-space: normal;">Create whatever you
require for your Business to bloom with Tons of Customization Possibilities.</div>
<div class="tp-caption customin ltl tp-resizeme" data-x="center" data-hoffset="0" data-y="top"
data-voffset="478"
data-transform_in="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;s:800;e:Power4.easeOutQuad;"
data-speed="800" data-start="1550" data-easing="easeOutQuad" data-splitin="none"
data-splitout="none" data-elementdelay="0.01" data-endelementdelay="0.1"
data-endspeed="1000" data-endeasing="Power4.easeIn" style="z-index: 3;"><a href="#"
class="button button-border button-white button-light button-large button-rounded text-end m-0"><span>Browse</span><i
class="icon-angle-right"></i></a></div>
</li>
</ul>
</div>
</div>
</div>
</section>
This error I'm getting right now:
Property 'revolution' does not exist on type 'JQuery'