Question

所以我见过Revolunet开发的角度旋转木马，以及 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有一个bug，我只是试图让它工作并浏览它的代码。它使用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;

这仍然是一种解决方法。

自动滑动 - revolunet的角度旋转木马

2 个答案: