Question

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

由于

Answer 1

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

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

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

另外，如果你打开flexslider.css，你会看到＆＃34;图标字体＆＃34;评论（靠近顶部）一些来源网址。确保这些源URL与项目中flexslider字体文件的位置匹配。

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

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

.carousel li {margin-right:0;}

AngularJS Flexslider按钮和保证金问题

1 个答案: