我正在尝试在我的元素中实现一个简单的 angular-flexslider 应用程序:
https://github.com/woothemes/FlexSlider
我已经成功地滑动了图像，但是我无法显示下一个/上一个按钮，而且，似乎有一个显示上一个图像的左边距。
HTML:
<head>
<title>Angular FlexSlider Example - Basic Slider</title>
<link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/woothemes/FlexSlider/master/flexslider.css">
<style type="text/css">
.flexslider-container {
width: 100%;
margin: 1px auto;
}
</style>
</head>
<body ng-controller="BasicSliderCtrl">
<flex-slider slide="s in slides" animation="slide" >
<li>
<img ng-src="{{s}}">
</li>
</flex-slider>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="https://raw.githubusercontent.com/woothemes/FlexSlider/master/jquery.flexslider.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="https://raw.githubusercontent.com/thenikso/angular-flexslider/master/angular-flexslider.js"></script>
<script type="text/javascript">
angular.module('BasicSlider', ['angular-flexslider'])
.controller('BasicSliderCtrl', function($scope) {
$scope.slides = [
'http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg',
'http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg',
'http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg',
'http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg'
];
});
</script>
</body>
</html>
笨蛋:http://plnkr.co/edit/2529sAA4i6qcCzbZgCA2
这是我想要实现的目标:http://flexslider.woothemes.com/index.html
谢谢
最佳答案
我不知道你是否还有这个问题，但我自己也遇到过这两个问题。对我有用的修复如下。
问题 1 - 下一个/上一个按钮不显示
下一个和上一个按钮使用 css 显示。确保页面中包含 flexslider.css。
此外，如果您打开 flexslider.css，您将在“图标字体”注释(靠近顶部)下看到一些源 URL。确保这些源 URL 与元素中 flexslider 字体文件的位置匹配。
问题 2 - 显示上一张图片的左边距
将以下代码添加到页面中包含的 css 文件
.carousel li {margin-right:0;}
关于AngularJS Flexslider 按钮和边距问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24862556/