带有 Angular JS 的光滑轮播 [英] Slick Carousel with Angular JS

查看：33
本文介绍了带有 Angular JS 的光滑轮播的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在我的一个 Slick carousel.org/" rel="noreferrer">AngularJS 应用程序.为此，我创建了如下指令:

 myApp.directive('slickSlider',function(){返回 {限制:'A'，链接:功能(范围，元素，属性){$(element).slick(scope.$eval(attrs.slickSlider));}}});

这是我在视图文件中的代码:

 
<div class="my-slide"><a><img ng-src="assets/img/img1.png"/></a>
<div class="my-slide"><a><img ng-src="assets/img/img1.png"/></a>

<div class="my-slide"><a><img ng-src="assets/img/img1.png"/></a>

<div class="my-slide"><a><img ng-src="assets/img/img1.png"/></a>

<div class="my-slide"><a><img ng-src="assets/img/img1.png"/></a>

<div class="my-slide"><a><img ng-src="assets/img/img1.png"/></a>

在这种情况下，它工作正常并正确初始化.

但是当我使用 ngRepeat 动态创建幻灯片时，它不会初始化并且一张接一张地显示幻灯片.

这是我使用 ngRepeat

的代码

<div class="my-slide" ng-repeat="幻灯片中的幻灯片"><a><img ng-src="assets/img/{{slide.img}}"/></a>

任何建议，我该如何解决?

解决方案

我怀疑 slick 插件可能需要完全渲染 DOM 才能正常工作.

试试:

myApp.directive('slickSlider',function($timeout){返回 {限制:'A'，链接:功能(范围，元素，属性){$超时(功能(){$(element).slick(scope.$eval(attrs.slickSlider));});}}});

I am using Slick carousel in one of my AngularJS application. For that I have created directive as follows:

  myApp.directive('slickSlider',function(){
   return {
     restrict: 'A',
     link: function(scope,element,attrs) {
       $(element).slick(scope.$eval(attrs.slickSlider));
   }
  }
 });

Here is my code in view file:

  <div class="clearfix"  
  slick-slider="{dots: false, arrows: true, draggable: 
  false, slidesToShow:3, infinite:false}">
              <div class="my-slide">
                  <a><img ng-src="assets/img/img1.png"/></a>
              </div>
              <div class="my-slide">
                  <a><img ng-src="assets/img/img1.png"/></a>
              </div>
              <div class="my-slide">
                  <a><img ng-src="assets/img/img1.png"/></a>
              </div>
              <div class="my-slide">
                  <a><img ng-src="assets/img/img1.png"/></a>
              </div>
              <div class="my-slide">
                  <a><img ng-src="assets/img/img1.png"/></a>
              </div>
              <div class="my-slide">
                  <a><img ng-src="assets/img/img1.png"/></a>
              </div>
    </div>

In this case it is working fine and initializing properly.

But when I creates slides dynamically using ngRepeat, it is not initializing and shows slides one after the other.

Here is my code using ngRepeat

<div class="clearfix"  
  slick-slider="{dots: false, arrows: true, draggable: 
  false, slidesToShow:3, infinite:false}">
      <div class="my-slide" ng-repeat="slide in slides">
         <a><img ng-src="assets/img/{{slide.img}}"/></a>
       </div>
 </div>

Any suggestion, how can I resolve it?

解决方案

I suspect that the slick plugin may need the DOM to be fully rendered to work properly.

Try: 

myApp.directive('slickSlider',function($timeout){
 return {
   restrict: 'A',
   link: function(scope,element,attrs) {
     $timeout(function() {
         $(element).slick(scope.$eval(attrs.slickSlider));
     });
   }
 }
});

这篇关于带有 Angular JS 的光滑轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆