I have a stack of Divs created with ng-repeat. Plunker

Quick Image:

Is it possible to create this stack of div work like a slider? Like:

• if I press Next button Top div will slide away and 2nd top will show.
• pressing Previous button will show previous div if there any.

Code:

<div class="col-md-2-4" 
     ng-repeat="card in cards" 
     ng-style="{left: 2 * $index + 'px', top: 2 * $index + 'px', 'z-index': (cards.length - $index)}">
<ul class="list-unstyled cs-tag-item-grp">
   <li class="clearfix" ng-repeat="value in card.cardItem">
     <div class="pull-left">
          {{value.keys}}
      </div>
    </li>
</ul>
<div class="keys">
  <button type="button" class="btn btn-pre">Previous</button>
  <button type="button" class="btn btn-next">Next</button>
</div>

It will really help me if this is possible.

I have a stack of Divs created with ng-repeat. Plunker

Quick Image:

Is it possible to create this stack of div work like a slider? Like:

• if I press Next button Top div will slide away and 2nd top will show.
• pressing Previous button will show previous div if there any.

Code:

<div class="col-md-2-4" 
     ng-repeat="card in cards" 
     ng-style="{left: 2 * $index + 'px', top: 2 * $index + 'px', 'z-index': (cards.length - $index)}">
<ul class="list-unstyled cs-tag-item-grp">
   <li class="clearfix" ng-repeat="value in card.cardItem">
     <div class="pull-left">
          {{value.keys}}
      </div>
    </li>
</ul>
<div class="keys">
  <button type="button" class="btn btn-pre">Previous</button>
  <button type="button" class="btn btn-next">Next</button>
</div>

It will really help me if this is possible.

• javascript
• angularjs

• 1 My suggestions for this (for performance and your own sanity), separate the display behaviour into a style file and just use classes for the slide effect. So, you can add a class like .active to the current div and remove it when the next is called. So, when removing a class, you can trigger the effect but not have it rely on your JS. Remember, JS for logic, CSS for styling (and wisdom for differentiating the two). – Bwaxxlo Commented Apr 10, 2015 at 14:57
• 1 "slide away" and disappear? – dfsq Commented Apr 10, 2015 at 18:39
• Yes ! it will disappear :) – Raihan Commented Apr 10, 2015 at 19:00
• Okay. So the card disappeared. Then you press previous. What happens? It reappear from nowhere or what? – dfsq Commented Apr 10, 2015 at 20:43
• Ok it will hide when you press next. Then if you press previous it will show up again. Just it will be in a sequence. – Raihan Commented Apr 10, 2015 at 20:54

1 Answer 1

Okay, this is fun. Here is how you can do it. By clicking buttons lets calculate the index of the new top card. Anything with the index lower then new calculated one should be hidden. In order to hide card with nice animations it's optimal to use CSS classes with arbitrary transition rules.

As the result HTML will look something like this:

<div class="col-md-2-4" 
    ng-class="{'card-hide': index  > $index + 1}"
    ng-repeat="card in cards" 
    ng-style="{left: 2 * $index + 'px', top: 2 * $index + 'px', 'z-index': (cards.length - $index)}">

    <ul class="list-unstyled cs-tag-item-grp">
        <li class="clearfix" ng-repeat="value in card.cardItem">
            <div class="pull-left">
                {{value.keys}}
            </div>
        </li>
    </ul>
</div>
<div class="keys">
  <button type="button" class="btn btn-next" ng-click="index = index < cards.length ? index + 1 : cards.length">Next</button>
  <button type="button" class="btn btn-pre" ng-click="index = index > 1 ? index - 1 : 1">Previous</button>
</div>

where starting index is defined in controller as:

$scope.index = 1;

Slide/fade effect is handled by very simple CSS rule:

.card-hide {
    left: -100px !important;
    opacity: 0 !important;
}

Demo: http://plnkr.co/edit/tLVJrpqavKbHvKzMljNG?p=preview