Carousel by increasing z-index in Dart Language?

Question

I am trying to implement carousel using Dart Language with multiple Div's placed in a parent div. When a right button is clicked, the next div's z-index must be higher than the previous so that it gets displayed. I have stored all divs class names in an arraylist. Now can anyone help to get this work?? HTML

<div class="carousel">
  <div class="galleryCars">
  ....
  </div>
  <div class="galleryCars2">
  ....
  </div>
  <div class="galleryCars3">
  ....
  </div>
  <div class="galleryCars4">
  ....
  </div>
</div>

DART

import 'dart:html';
import 'dart:core';
void main(){
    query(".rightArrow img").onClick.listen((e) => cssRightArrow());
    query(".leftArrow img").onClick.listen((e) => cssLeftArrow());
}
cssRightArrow(){
  var carousel = query(".carousel");
  var classList = [];
  carousel.children.forEach(
      (childElement) => childElement.classes.forEach(
          (className) => classList.add(className)
          ));

  /*for (var i = 0; i < classList.length; i++) {                
    var zIndexElem = query(".${classList[i]}");
    var newIndex = int.parse(zIndexElem.style.zIndex ) + 10 ;   
    zIndexElem.style.zIndex = "${newIndex}";
    }*/ //Not Working
}

Answer 1

Here's a working sample with style.display = 'none' instead of zIndex (I don't think zIndex is well suited for this use case.) :

import 'dart:html';

void main(){
  query(".rightArrow img").onClick.listen((e) => cssRightArrow());
  query(".leftArrow img").onClick.listen((e) => cssLeftArrow());
}
cssRightArrow(){
  final elements = query(".carousel").children;

  // looking for the one currently displayed
  final Element current = elements.firstWhere((e) => e.style.display != 'none');
  final currentIndex = elements.indexOf(current);

  // hide current and show next one
  if (currentIndex + 1 < elements.length) {
    current.style.display = 'none';
    elements[currentIndex + 1].style.display = '';
  }
}