创建一个div的轮播，其中包含表格，前一个和下一个div部分可见

Question

我想创建一个角度为div的可滚动轮播，它们是使用ng-repeat动态创建的，每个都有表/其他div。 到目前为止，我已经能够创建旋转木马，如图所示，

滚动工作正常，不同的div是可见的。对于滚动，我在箭头上添加了功能（ng-click），它使用所用数组的当前元素的id（bid数组）来显示div。

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

像这样：

2）我希望滚动不进入循环模式，就像正常流程中的情况一样，即从最后一个项目到下一个点击的第一个项目。

现在我的系列的最后一页一次又一次出现，点击下一个箭头icon.Same与第一页/ 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>

对于箭头：

 <a ng-if="bidIndex!=0" class="left carousel-control" ng-click="leftBid(bidIndex)" href="#carousel-example-captions" data-slide="prev">
                <span ng-click="leftBid(bidIndex)" style="color: grey;font-size:5em" class="icon-prev"></span>
            </a>
            <a  ng-if="bidIndex!=bidsList.length-1" class="right carousel-control" ng-click="rightBid(bidIndex)" href="#carousel-example-captions" data-slide="next">
                <span ng-click="rightBid(bidIndex)" style="color: grey;font-size:5em" class="icon-next"></span>
            </a>

我尝试使用

.carousel-inner .active.left { left: -33%; }
.carousel-inner .next        { left:  33%; }
.carousel-inner .prev        { left: -33%; }

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

Answer 1

问题一：

当我在过去完成此操作时，我创建了两个$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;
}

您可以使用这些表达式绑定到dom中的ng-class，以确定该元素是上一张幻灯片还是下一张幻灯片。

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

</div>

此方法适合您，除非您在ng-repeat中因任何原因隐藏或过滤任何幻灯片。原因是$index表示视图索引，而不是数组中幻灯片的真实索引。因此，您会注意到逻辑中的问题。

问题二：

根据DRY编程的精神，您现在可以利用这两个新创建的函数，以正确的“循环”方式确定下一张和上一张幻灯片的索引。因此设置新幻灯片的索引：

在Dom：

<div class="arrowElementThatYouClickForNextSlide" ng-click="increaseSlide()"></div>

<div class="arrowElementThatYouClickForPreviousSlide" ng-click="decreaseSlide()"></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.increaseSlide() = function increaseSlideFn() {
  $scope.currentSlideIndex = $scope.getNextSlideIndex();
}

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