Question

我在项目中集成了Angular carousal，除了Safari之外，它在所有浏览器中都运行正常。

我在我的项目中做了

index.html中的

我已经包含以下文件：

{\rtf1\ansi\ansicpg1252\uc1\deff0{\fonttbl
{\f0\fnil\fcharset0\fprq2 Arial;}
{\f1\fswiss\fcharset0\fprq2 Tahoma;}
{\f2\froman\fcharset2\fprq2 Symbol;}}
{\colortbl;}
{\stylesheet{\s0\itap0\nowidctlpar\f0\fs24 [Normal];}{\*\cs10\additive Default Paragraph Font;}}
{\*\generator TX_RTF32 19.0.542.500;}
\paperw7315\paperh15840\margl0\margt0\margr0\margb0\deftab1134\widowctrl\lytexcttp\formshade\sectd
\headery720\footery720\pgwsxn7315\pghsxn15840\marglsxn0\margtsxn0\margrsxn0\margbsxn0\pgbrdropt32\pard\itap0\nowidctlpar\plain\f1\fs20 MED BILL INV#  28989293\par }

app.js中的

<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>

并添加了给定参考的控制器。

我如何在Safari中支持它？

Answer 1

我将jquery.carouFredSel.js用于Angular应用程序

例如，在指令

中

        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({
		width: '100%',
		items: {
			visible: 'odd+2'
		},
		scroll: {
			pauseOnHover: true,
			onBefore: function() {
				$(this).children().removeClass( 'hover' );
			}
		},
		auto: {
			items: 1,
			easing: 'linear',
			duration: 1250,
			timeoutDuration: 0
		},
		pagination: {
			container: '#pager',
			items: 1,
			duration: 0.5,
			queue: 'last',
			onAfter: function() {
				var cur = $(this).triggerHandler( 'currentVisible' ),
					mid = Math.floor( cur.length / 2 );
 
				cur.eq( mid ).addClass( 'hover' );
			}
		}
	});
    // 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>

Angular-carousel无法在Safari浏览器中使用

1 个答案: