2014-07-21 119 views
0

我想實現我的項目中一個簡單的angular-flexslider應用:AngularJS 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

感謝

回答

1

我不知道,如果你仍然有這個問題,但我自己遇到了這兩個問題。對我有用的修復程序如下。

問題1 - 下一/前一按鈕未示出

的下一個和前按鈕使用CSS顯示。確保flexslider.css包含在您的頁面中。另外,如果你打開flexslider.css,你會看到一個「圖標字體」評論(其附近的頂部)一些源URL。確保這些源URL與您的項目中的flexslider字體文件的位置相匹配。

第2期 - 左邊距顯示前面的圖像

下面的代碼添加到CSS文件包含在網頁上

.carousel li {margin-right:0;}