Am writing image carousel for first time on web. A...

# javascript

[Tarun Chawla]

Am writing image carousel for first time on web. Am thinking about creating a layout of this kind:

<Prev Button/a> <Image> <Next Button/a>

Am using Bulma css framework to design things. Do you have any suggestions which I should take care while implementing it?

[Tarun Chawla]

@andylamax @napperley how this is not kotlin? Do you think I am going to implement all transitions of carousel in js? If I have to implement a carousel lets say in js there are already lots of samples which someone can pick from but not in case of kotlin.

[Tarun Chawla]

Here is the way I implemented it, please let me know if it is missing things like security or responsiveness or anything else which I might be not knowing.

override fun RBuilder.render() {
  div("section") {
    div("container") {
      div("columns") {
        div("column is-two-thirds") {
          div("card") {
            div("card-image") {
              figure("image is-4by3") {
                val imageUrl = if ((props.imagesList.size > 0) && (state.currentImage < props.imagesList.size)) props.imagesList.get(state.currentImage) else ""
                println("image url = $imageUrl")
                img(src = imageUrl) {

                }
              }
            }
            div("card-content is-overlay has-text-danger") {
              span("icon is-size-1") {
                attrs.onClickFunction = {
                  println("left clicked")
                  setState {
                    currentImage = if (currentImage > 0) currentImage-1 else props.imagesList.size-1
                  }
                }
                i("fas fa-caret-square-left") {

                }
              }

              span("icon is-pulled-right is-size-1") {
                attrs.onClickFunction = {
                  println("right clicked")
                  setState {
                    currentImage = if (currentImage < props.imagesList.size-1) currentImage+1 else 0
                  }
                }
                i("fas fa-caret-square-right") {

                }
              }
            }
          }

        }
      }
    }
  }
}