June 24, 2019

Starting on Slider, trying vue-flickity (opens new window)

• npm (opens new window)
• style (opens new window)
• options (opens new window)

Working on this slider all day. A bit of a slog, but no big learnings. Using same methods to make sure templates render on the client since that's how they're designed. Doing a lot of transforms to make the stacking affect and limiting number of slides so it works in both directions predictably.

One thing, if you have preserve-3d on the parent, you can use translateZ instead of z-index.

.parent {
  transform-style: preserve-3d;
}
.child1 {
  transform: scale(0.9) translateX(8%) translateZ(-100px);
}
.child2 {
  transform: scale(0.8) translateX(18%) translateZ(-200px);
}