0

I want to set custom height (and possible other things) the the flickity 'carousel-cells' INDIVIDUALLY. I can see it is calculated somehow with with javascript by the flickity package itself.

How could I overwrite this, to create something like this (with the smaller inactive slide)?

enter image description here .

I have tried to give the carousel-cells a height of 300px, and the active carousel (who has a class is-selected) a height of 500px. That did not work. 

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

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

A simple codepen to get you started if you like.

nclsvh
  • 2,628
  • 5
  • 30
  • 52

1 Answers1

1

You need to work off the asNavFor sample until you get to a view like in this CodePen

Oluwafemi Sule
  • 36,144
  • 1
  • 56
  • 81
  • Hmm, that seems like the way to go. I'll give it a try! Thanks – nclsvh May 18 '17 at 15:10
  • How would you tackle the problem from the sliders? Slider 1 must show slide n, while slider 2 must show slide n+1 (also on change). – nclsvh May 19 '17 at 14:02