Auto Slide - revolunet 的角度旋转木马

Question

所以我看到了 Revolunet 开发的 angular carousel 以及 rn-carousel-auto-slide 等提供功能。问题是我应该在哪里将此功能注入我的代码？我已经尝试将它注入几个不同的标签，但似乎无法让它工作。希望有人能帮我解决这个问题...下面是我的实现代码...

    <div class="exploreCarousel">
    <div ng-controller="CarouselCtrl"
        ng-init="init(<?php echo $topic_id?>)" id="slides_control">
        <ul rn-carousel class="image" rn-carousel-indicator>
          <li ng-repeat="image in slides">
            <div><img ng-src="<?php echo UrlMgmt::getExploreImageUrl()?>{{image.image}}" class="layer" rn-carousel-auto-slide/></div>
          </li>
        </ul>
    </div>
</div>

如果我没有对你们说清楚，这将是 Revolunet 存储库的链接。

https://github.com/revolunet/angular-carousel

谢谢

Answer 1

似乎 rn-carousel-auto-slide 有一个错误，我只是试图让它工作并浏览它的代码。 它使用 element.children() 来找出有多少张幻灯片，但在启动时只执行一次 - 它适用于硬编码到 HTML 中的静态插入幻灯片 - 您应该将其添加到 UL 标记中。但是因为您想将它与 ng-repeat 一起使用，所以需要更改它以在 ng-repeat 完成后检查元素的子元素的长度，或者在增量函数的每次迭代中检查它。 我会尽快修复它并提出拉取请求。 同时添加：（您必须使用模块和指令的 src 版本而不是缩小版，并且您应该在将 rn-carousel-auto-slide.js 复制到 bower_components 之外的某个位置后进行此更改（假设您使用 bower 等。 ...)

$timeout(function () {
      slidesCount = element.children().length;
}, 100); // can probably be shorter but this is safe.

Answer 2

您实际上不必接触文件，方法如下：

设置rn-carousel-index="cpos" 在你的控制器中：

var position = false,
  interval = 5000,
  slides = [
  {
    image: './images/carousel/image-1.jpg',
    title: 'this is the title',
    link: '//beta.dungeondefenders.com',
    text: 'this is the description, can be long, can be long, can be long, can be long, can be long, can be long'
  },
  {
    image: './images/carousel/image-2.jpg',
    title: 'this is the title',
    link: '//beta.dungeondefenders.com',
    text: 'this is the description, can be long, can be long, can be long, can be long, can be long, can be long'
  }];


$interval(function () {
  var newPos = 0;
  if(position) {
    newPos = $scope.cpos +1;
    if(newPos > slides.length -1) {
      newPos = 0;
    }
  } else {
    position = true;
  }

  logger.info(position,newPos,slides.length-1);
  $scope.cpos = newPos;
}, interval);

$scope.cpos = position;
$scope.slides = slides;

不过，这仍然是一种解决方法。