0
IamはAngular4.Iamで作業しています。FlexSliderを使用してカルーセルに画像を表示しようとしています。画像データはAPIから取得しています。私はindex.htmlファイルにflexslider.cssとflexslider.jsファイルを含めました。私の現在のhtml file.But Iamは、任意のデータを取得し、flexsliderないがworking.Belowではない私のコードです：FlexsliderがAngular4で動作していませんか？
<div id="slider" class="flexslider">
<ul class="slides" *ngFor="let image of productInfo.images">
<li>
<img src="{{image.src}}" />
</li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
<div id="carousel" class="flexslider" *ngFor="let image of productInfo.images">
<ul class="slides">
<li>
<img src="{{image.src}}" />
</li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
<script>
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});
</script>
</div><!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SimplySaltApp</title>
<base href="/">
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Best Store Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript">
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>
<!-- //for-mobile-apps -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider-min.js"></script>
<link href="assets/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="assets/css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- Demo CSS -->
<link rel="stylesheet" href="assets/css/flexslider.css" type="text/css" media="screen" />
<!-- Modernizr -->
<script src="assets/js/modernizr.js"></script>
<script src="assets/js/jquery.flexslider.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- js -->
<!-- <script src="assets/js/jquery.min.js"></script>-->
<!-- //js -->
<!-- cart -->
<script src="assets/js/simpleCart.min.js"></script>
<!-- cart -->
<!-- for bootstrap working -->
<script type="text/javascript" src="assets/js/bootstrap-3.1.1.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- //for bootstrap working -->
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<!-- timer -->
<link rel="stylesheet" href="assets/css/jquery.countdown.css" />
<!-- //timer -->
<!-- animation-effect -->
<link href="assets/css/animate.min.css" rel="stylesheet">
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/popup.js" type="text/javascript"></script>
<script>
new WOW().init();
</script>
<!-- //animation-effect -->
</head>
<body>
<app-root></app-root>
</body>
</html>