Create a carousel of divs with tables in it and previous and next divs partially visible

问题

I want to create a scrollable carousel of divs in angular which are created dynamically using ng-repeat with tables/other divs in each . So far i have been able to create the carousel as shown in image ,

The scroll works fine and the different divs are visible.For the scroll i have added functions on arrows(ng-click) which use the id of current element of the array used (bid array) to display the div.

I have two issues : 1) I want the previous and next div's blue tables to be visible as blurred on each side of the current div

Like this :

2) I want the scroll to NOT go to the cycle mode as is the case in the normal flow, i.e. from last item to the first on clicking next.

Right now the last page of my series comes up again and again on clicking next arrow icon.Same with the first page/div and the previous arrow icon.

My code for carousel :

<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>

And for Arrow :

 <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>

I tried using

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

for the previous and next divs but it didn't work .

回答1:

For Question Number One:

When I have done this in the past, I have created two $scope functions which always know what the previous and next "slide" indexes are.

Controller:

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

You can use expressions such as these to bind to your ng-class in the dom to decide whether or not the element is the previous or next slide/pane.

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

</div>

This method will work for you UNLESS you are hiding or filtering any of your slides for any reason in your ng-repeat. Reason being is that $index represents the view index, and not the true index of the slide in the array. Therefore you will notice issues in the logic.

For Question Number Two:

In the spirit of DRY programming, you can now take advantage of these two newly created functions to determine the index of the next and previous slide in the correct "cycling" fashion that you have described. And therefore set the index of the new slide:

In the Dom:

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

<div class="arrowElementThatYouClickForPreviousSlide" ng-click="decreaseSlide()"></div>

Controller:

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

来源：https://stackoverflow.com/questions/33741115/create-a-carousel-of-divs-with-tables-in-it-and-previous-and-next-divs-partially

标签

html

angularjs

carousel