AngularJS Flexslider 按钮和边距问题答案

【问题标题】：AngularJS Flexslider Buttons and Margin IssueAngularJS Flexslider 按钮和边距问题
【发布时间】：2014-11-26 19:29:18
【问题描述】：

我正在尝试在我的项目中实现一个简单的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>

Plunker：http://plnkr.co/edit/2529sAA4i6qcCzbZgCA2

这是我想要实现的目标：http://flexslider.woothemes.com/index.html

谢谢

【问题讨论】：

标签： angularjs css angularjs-scope flexslider

【解决方案1】：

我不知道你是否还有这个问题，但我自己也遇到了这两个问题。对我有用的修复如下。

问题 1 - 下一个/上一个按钮未显示

下一个和上一个按钮使用 css 显示。确保 flexslider.css 包含在您的页面中。

此外，如果您打开 flexslider.css，您将在“图标字体”注释下（靠近顶部）看到一些源 URL。确保这些源 URL 与项目中 flexslider 字体文件的位置匹配。

问题 2 - 左边距显示上一张图片

将以下代码添加到页面中包含的 css 文件中

.carousel li {margin-right:0;}

【讨论】：