创建一个带有表的div轮播，上一个和下一个div部分可见

Question

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

滚动工作正常，并且可以看到不同的div。对于滚动，我在箭头（ng-click）上添加了功能，这些功能使用所使用数组（bid array）的当前元素的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>

对于箭：

 <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%; }

对于上一个和下一个divs来说，但是没有用。

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();
}