AngularJS와 Flexslider 버튼 및 여백 문제

내 프로젝트 내에서 간단한 angular-flexslider 응용 프로그램을 구현하기 위해 노력하고 있습니다 :AngularJS와 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 여기

내가 달성하기 위해 노력하고 무엇 :이 문제가 계속있는 경우

출처

2014-07-21 Oam Psy

모르겠다을 http://flexslider.woothemes.com/index.html

감사하지만 나는이 두 가지 문제점을 직접 해결했다. 나를 위해 일한 수정 사항은 다음과 같습니다.

판 1 - 이전/다음 버튼

다음 및 이전 버튼 CSS를 이용하여 도시되어 표시되지. 페이지에 flexslider.css가 포함되어 있는지 확인하십시오.

또한 flexslider.css를 열면 "아이콘 글꼴"주석 (상단 근처)에 일부 원본 URL이 표시됩니다. 이러한 원본 URL이 프로젝트의 flexslider 글꼴 파일 위치와 일치하는지 확인하십시오.

는 문제 2 - 왼쪽 여백이 CSS 파일에 다음 코드를 추가하여 이전 이미지

을 보여주는 당신의 페이지에 포함

.carousel li {margin-right:0;}

출처

2014-09-26 14:49:00 Davie

AngularJS와 Flexslider 버튼 및 여백 문제

답변

관련 문제