CODEWITHSUNDEEP
jqueryangulartypescriptangular-cli
Sharad Sharma
Sharad Sharma

Reputation: 89

jQuery bxSlider Plugin not working in Angular 4

I am a beginner in Angular 5 Framework. I have create a project and working on it but I am facing a problem with bxSlider. I have added a bxSlider plugin in myangular project. It seems ok when it load first. But when I click On other page link and get back to my index page the bxSlider plugin doesn't work.

1) Here is cutsom.js file.

$(document).ready(function($) {

$('.homeSlider').bxSlider({
    speed: 1500,
    pause: 5000,
    mode: 'fade',
    captions: true,
    auto: false,
    infiniteLoop: true,
    stopAuto: false,
    pager: false,
    nextSelector: '#slider-next',
    prevSelector: '#slider-prev',
});

});

2) app.component.ts file

declare var jquer:any;
declare var $:any;

I have declare both jquery and $ object in my component file.

When the site load it looks like this. enter image description here

After I change the page and get back to my index page the whole slider breakdown.

enter image description here

Upvotes: 0

Views: 1364

Answers (1)

Madan Sandiri
Madan Sandiri

Reputation: 459

move the code from custom.js to ngOnInit() {} life cycle method inside your component file. whenever the component is loaded it will initialize the slider. No need of writing document ready function.

Upvotes: 2

Related Questions