2016-06-29 63 views
1

我在我的項目中集成了Angular carousal,它在除Safari之外的所有瀏覽器中工作正常。角度傳送帶不在Safari瀏覽器中工作

我參考了angular-carousel

我做我的項目

index.html中

我已經包含了以下文件:

<script src="js/carousel/angular-swipe.js"></script> 
    <script src="js/carousel/angular-carousel.js"></script> 
    <script src="client/html/carouselController.js"></script> 

<div class="row" ng-controller="DemoCtrl"> 
       <div class="col-sm-12"> 
       <ul class="my-slider" rn-carousel rn-carousel-buffered rn-carousel-indicator rn-carousel-control> 
        <li ng-repeat="slide in slides|limitTo:5" ng-style="{'background-image': 'url(' + slide.img + ')'}"> 
        <div class="debug"> 
         {{ slide.label }}/{{ slides.length }} 
        </div> 
        </li> 
       </ul> 
       </div> 
      </div> 
      </div> 

在app.js

var app = angular.module("demoApp", 
["ngRoute", "ngSanitize", "ngResource", "ui.bootstrap", 
"angularMoment", "blockUI",'facebook','directive.g+signin', 
"angular-carousel","swipe" 
]); 

,也加入給定參考的控制器。

我如何在Safari中支持它?

回答

1

我對角應用

例如使用jquery.carouFredSel.js,在指令

 restrict: 'E', 
 
     controller: [ "$scope", function($scope) { 
 
      var slides = $scope.slides = []; 
 
      // Add slides here 
 
      slides.push({ 
 
       image: '', 
 
       alt: '' 
 
      }); 
 
     }],  
 
     link: function($scope, element, attrs) { 
 
      $scope.$watch('mycarousel', function() { 
 

 
// this jquery.carouFredSel.js example setup begin 
 
$('#mycarousel').carouFredSel({ 
 
\t \t width: '100%', 
 
\t \t items: { 
 
\t \t \t visible: 'odd+2' 
 
\t \t }, 
 
\t \t scroll: { 
 
\t \t \t pauseOnHover: true, 
 
\t \t \t onBefore: function() { 
 
\t \t \t \t $(this).children().removeClass('hover'); 
 
\t \t \t } 
 
\t \t }, 
 
\t \t auto: { 
 
\t \t \t items: 1, 
 
\t \t \t easing: 'linear', 
 
\t \t \t duration: 1250, 
 
\t \t \t timeoutDuration: 0 
 
\t \t }, 
 
\t \t pagination: { 
 
\t \t \t container: '#pager', 
 
\t \t \t items: 1, 
 
\t \t \t duration: 0.5, 
 
\t \t \t queue: 'last', 
 
\t \t \t onAfter: function() { 
 
\t \t \t \t var cur = $(this).triggerHandler('currentVisible'), 
 
\t \t \t \t \t mid = Math.floor(cur.length/2); 
 
    
 
\t \t \t \t cur.eq(mid).addClass('hover'); 
 
\t \t \t } 
 
\t \t } 
 
\t }); 
 
    // setup carousel end 
 

 
      }) 
 
      },

在HTML模板

<div id="wrapper"><div id="mycarousel"> 
 
       <div ng-repeat="slide in slides" active="slide.active"> 
 
        <a href="#"><img ng-src="{{slide.image}}" alt="{{slide.alt}}" width="200" height="200" /></a> 
 
        <span>{{slide.alt}}</span> 
 
       </div> 
 
       </div><div id="pager"> 
 
</div></div>

+0

可以請你把它放在粉色.. – Nitin

+1

[這個旋轉木馬的例子](http://plnkr.co/edit/s9Lj7k) –

相關問題