Я пытаюсь использовать вращение слайдера, предоставленное Themepunch на моем сайте (разработано в Angular 8) с динамическими данными c, которые поступают для файла JSON. Поэтому мне понадобились CSS и js файлы в индексе. html вот так
<head>
<meta charset="utf-8">
<title>Demo</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!--Css Files-->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/animate.css" rel="stylesheet">
<link href="assets/css/all.css" rel="stylesheet">
<link href="assets/css/theme.css" rel="stylesheet">
//Here is the css files
<link href="assets/css/rs-plugin/css/settings.css" rel="stylesheet">
<link href="assets/css/rs-plugin/css/navigation.css" rel="stylesheet">
<link href="assets/css/owl.carousel.min.css" rel="stylesheet">
<link href="assets/css/jquery.smartmenus.bootstrap-4.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/custom.css" rel="stylesheet">
</head>
<body>
<app-root></app-root>
<!-- js Files -->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.smartmenus.js"></script>
<script src="assets/js/jquery.smartmenus.bootstrap-4.js"></script>
// Here is the js files
<script src="assets/js/jquery.themepunch.tools.min.js"></script>
<script src="assets/js/jquery.themepunch.revolution.min.js"></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/functions.js"></script>
<script src="assets/js/custom.js"></script>
</body>
</html>
И я использую компонент, чтобы показать слайдер как баннер. В этом компоненте я использую вызов asy c, чтобы получить json из файла json и обновить массив, а в компоненте HMTL я использую ngFor l oop, он связывает данные массива. Тем не менее, silder не показывает каких-либо данных базы данных ngFor, и если я удаляю его, данные будут отображаться.
Вот код машинописного текста
@Component({
selector: 'app-banner',
templateUrl: './banner.component.html',
styleUrls: ['./banner.component.css']
})
export class BannerComponent implements OnInit, AfterViewInit {
constructor(private file: FileService, public translate: TranslateService) { }
@Input() entity: string;
@Input() site;
main_banner: any[] = [];
revSlider: any;
ngAfterViewInit() {
this.initRevolutionSlider();
}
ngOnInit() {
this.file.get(0, 'main_banner').then(r => {
this.main_banner = r;
});
}
get lang(): string {
return this.translate.currentLang == 'ar' ? '_ar' : '_en';
}
identify(index, item) {
return index;
}
counter: number = 0;
initRevolutionSlider() {
if ($('#revolutionSlider').get(0)) {
this.revSlider = $('#revolutionSlider').show().revolution({
sliderType: 'standard',
sliderLayout: 'fullscreen',
delay: 9000,
responsiveLevels: [4096, 1200, 992, 576],
gridwidth: [1100, 920, 680, 500],
gridheight: 740,
disableProgressBar: 'on',
spinner: 'spinner3',
parallax: {
type: "on",
levels: [20, 40, 60, 80, 100],
origo: "enterpoint",
speed: 400,
bgparallax: "on",
disable_onmobile: "off"
},
navigation: {
arrows: {
enable: true
}
},
});
}
}
}
, а вот HTML
Заранее спасибо