Flickity curseur avec css personnalisé par carrousel-cellule

Question

Je veux définir la hauteur personnalisée (et d'autres possibles) les cellules de carrousel de flickity INDIVIDUELLEMENT. Je peux voir qu'il est calculé en quelque sorte avec javascript par le flickity package lui-même.

Comment est-ce que je pourrais écraser ceci, pour créer quelque chose comme ceci (avec la plus petite diapositive inactive)?

.

J'ai essayé de donner aux carrousels une taille de 300px, et le carrousel actif (qui a une classe is-selected) une hauteur de 500px. Cela n'a pas fonctionné.

.carousel-cell { 
    width: 70%; 
    height: 300px; 
    background: #8C8; 
} 

.is-selected{ 
    height: 500px !important; 
} 

A simple codepen to get you started if you like.

Answer 1

Vous devez travailler à l'extérieur de l'échantillon asNavFor jusqu'à ce que vous obtenez une vue comme dans ce CodePen