Powerful, yet simple Carousels in Doodle

You can build almost any experience you can imagine using the new Carousels in Doodle 0.9.3. That's because their API is unrestricted and not opinionated about what a Carousel should look like. There are several built-in examples of various Presenters; but so much more is possible.

Here's how you might show a list of Images using the LinearPresenter, which shows all images in a line with the selected item positioned/sized based on the given constraints.

val carousel = Carousel(
    SimpleListModel(listOf(image1, image2, image3)),
    itemVisualizer { item, previous, _ ->
        when (previous) {
            is DynamicImage -> previous.also { it.update(item) }
            else            -> DynamicImage(item)
        }
    }
).apply {
    wrapAtEnds    = true
    acceptsThemes = false
    behavior      = object: CarouselBehavior<Image> {

      override val presenter = LinearPresenter<Image>(spacing = 10.0) {
          val aspectRatio = it.width.readOnly / it.height.readOnly

          it.width  eq parent.width
          it.center eq parent.center
          it.height eq it.width / aspectRatio
      }

      override val transitioner = dampedTransitioner<Image>(timer, animationScheduler) { _,_,_, update ->
          animate(0f to 1f, using = tweenFloat(easeInOutCubic, duration = 1 * seconds)) {
                update(it)
          }
      }
    }
}

Doodle is a pure Kotlin UI framework for the Web (and Desktop), that lets you create rich applications without relying on Javascript, HTML or CSS. Check out the documentation and tutorials to learn more.

Blog

Powerful, yet simple Carousels in Doodle

Nicholas Eddy

Join Our Newsletter. No Spam, Only the good stuff.

Related