An example of writing a Vue module with Siema

Vue siema example

<template lang="pug">
div.carousel(:class="{ responsive: responsive }")
  div.carousel-button.prev(@click="prev")
    img(src="@/assets/images/icons/previous-arrow.svg")
  div.carousel-button.next(@click="next")
    img(src="@/assets/images/icons/next-arrow.svg")
  div.siema
    img.carousel-image(v-for="image in images" :key="image" :src="image" height="200" alt="Product image")
</template>
<script>
import Siema from 'siema'

export default {
  props: {
    images: {
      type: Array,
      required: true
    },
    responsive: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    prev () {
      this.siema.prev()
    },
    next () {
      this.siema.next()
    },
    update () {
      this.siema.update()
    },
    mountSiema () {
      this.siema = new Siema({
        selector: '.siema',
        duration: 300,
        easing: 'ease-in-out',
        perPage: {
          900: 2
        },
        startIndex: 0,
        draggable: true,
        multipleDrag: true,
        loop: true,
        onInit: () => {},
        onChange: () => {}
      })
    }
  },
  updated () {
    this.mountSiema()
  },
  mounted () {
    this.mountSiema()
  }
}
</script>
<style lang="sass" scoped>
@import '~SassColors'

.carousel
  position: relative
  margin: 10px 0px
  min-height: 350px

  &.responsive
    @media(max-width: $phone)
      min-height: 200px

      .carousel-image
        height: 200px

  &-image
    height: 350px
    border-radius: 8px

  &-button
    width: 40px
    height: 40px
    border-radius: 50%
    top: calc(50% - 20px)
    background: rgba(65, 65, 65, 0.95)
    position: absolute
    z-index: 3
    display: flex
    justify-content: center
    align-items: center
    cursor: pointer
    transition: all 200ms ease-in-out

    &:hover
      background: rgba(20, 20, 20, 1)

    img
      height: 20px

    &.prev
      left: 20px

    &.next
      right: 20px
</style>