Карусель, увеличивая z-индекс в Dart Language?

Question

Я пытаюсь реализовать карусель с использованием Dart Language с несколькими Div, размещенными в родительском div. Когда нажимается правая кнопка, следующий z-индекс div должен быть выше предыдущего, чтобы он отображался. Я сохранил все имена классов divs в arraylist. Теперь может кто-нибудь помочь получить эту работу? 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

Вот рабочий пример с style.display = 'none' вместо zIndex (я не думаю, что zIndex хорошо подходит для этого случая использования.):

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 = ''; 
    } 
}