Html 创建一个div旋转木马，其中的表以及上一个和下一个div部分可见

我想在angular中创建一个可滚动的div旋转木马，这些div是使用ng repeat动态创建的，每个div中都有表/其他div。 到目前为止，我已经能够创建如图所示的旋转木马，

卷轴工作正常，可以看到不同的div。对于卷轴，我在箭头（ng click）上添加了一些功能，这些功能使用数组（bid数组）当前元素的id来显示div

我有两个问题： 1） 我希望上一个和下一个div的蓝色表在当前div的每一侧都显示为模糊

像这样：

2） 我希望滚动不会像正常流程中的情况一样进入循环模式，即单击“下一步”时从最后一项切换到第一项

现在，单击下一个箭头图标，我的系列文章的最后一页会一次又一次出现。与第一页/div和上一个箭头图标相同

我的旋转木马代码：

<div id="carousel-example-captions" class="carousel slide bs-docs-carousel-example">
     <div class="carousel-inner" >
            <div  style="width: 66%;left:17%"  class="item active">
                  <div class="row" style="border: 2px solid #e3e3e3;margin-top: 30px">  Code for displayed divs
                   </div>
               </div>
       </div>
   </div>

对于上一个和下一个div，但它不起作用。

对于第一个问题： 当我以前这样做时，我创建了两个

$scope

函数，它们总是知道上一个和下一个“幻灯片”索引是什么

控制器：

$scope.slideArray = [{...}, {...}, {...}];

$scope.getNextSlideIndex = function getNextSlideIndexFn() {
  return $scope.currentSlideIndex === $scope.slidesArray.length - 1 ? $scope.currentSlideIndex + 1 : 0;
}

$scope.getPreviousSlideIndex = function getPreviousSlideIndexFn() {
  return $scope.currentSlideIndex === 0 ? $scope.slidesArray.length - 1 : $scope.currentSlideIndex - 1;
}

$scope.slideArray = [{...}, {...}, {...}];

$scope.getNextSlideIndex = function getNextSlideIndexFn() {
  return $scope.currentSlideIndex === $scope.slidesArray.length - 1 ? $scope.currentSlideIndex + 1 : 0;
}

$scope.getPreviousSlideIndex = function getPreviousSlideIndexFn() {
  return $scope.currentSlideIndex === 0 ? $scope.slidesArray.length - 1 : $scope.currentSlideIndex - 1;
}

$scope.increaseSlide() = function increaseSlideFn() {
  $scope.currentSlideIndex = $scope.getNextSlideIndex();
}

$scope.decreaseSlide() = function decreaseSlideFn() {
  $scope.currentSlideIndex = $scope.getPreviousSlideIndex();
}

您可以使用这样的表达式绑定到dom中的

ng类

，以确定元素是上一张幻灯片还是下一张幻灯片/窗格

<div ng-repeat='slide in slides' ng-class='{next : $index === getNextSlideIndex(), prev: $index === getPreviousSlideIndex(), active: $index === currentSlideIndex }'>
  
</div>

控制器：

$scope.slideArray = [{...}, {...}, {...}];

$scope.getNextSlideIndex = function getNextSlideIndexFn() {
  return $scope.currentSlideIndex === $scope.slidesArray.length - 1 ? $scope.currentSlideIndex + 1 : 0;
}

$scope.getPreviousSlideIndex = function getPreviousSlideIndexFn() {
  return $scope.currentSlideIndex === 0 ? $scope.slidesArray.length - 1 : $scope.currentSlideIndex - 1;
}

$scope.slideArray = [{...}, {...}, {...}];

$scope.getNextSlideIndex = function getNextSlideIndexFn() {
  return $scope.currentSlideIndex === $scope.slidesArray.length - 1 ? $scope.currentSlideIndex + 1 : 0;
}

$scope.getPreviousSlideIndex = function getPreviousSlideIndexFn() {
  return $scope.currentSlideIndex === 0 ? $scope.slidesArray.length - 1 : $scope.currentSlideIndex - 1;
}

$scope.increaseSlide() = function increaseSlideFn() {
  $scope.currentSlideIndex = $scope.getNextSlideIndex();
}

$scope.decreaseSlide() = function decreaseSlideFn() {
  $scope.currentSlideIndex = $scope.getPreviousSlideIndex();
}

---

一个更新，我已经找到了控制旋转木马流量的方法，即第二期，我所需要的是上一期和下一期的部分n模糊可见。嗨，我会尝试你的方法n在第一期给你回复，第二期，我已经做了，无论如何这真的回答了你的问题吗？是的，是的，我稍微调整了一下，然后就成功了

$scope.slideArray = [{...}, {...}, {...}];

$scope.getNextSlideIndex = function getNextSlideIndexFn() {
  return $scope.currentSlideIndex === $scope.slidesArray.length - 1 ? $scope.currentSlideIndex + 1 : 0;
}

$scope.getPreviousSlideIndex = function getPreviousSlideIndexFn() {
  return $scope.currentSlideIndex === 0 ? $scope.slidesArray.length - 1 : $scope.currentSlideIndex - 1;
}

$scope.increaseSlide() = function increaseSlideFn() {
  $scope.currentSlideIndex = $scope.getNextSlideIndex();
}

$scope.decreaseSlide() = function decreaseSlideFn() {
  $scope.currentSlideIndex = $scope.getPreviousSlideIndex();
}