hinsencamp

<template>
 ...
  <Card
    ...
    v-touch:swipe="this.swipeHandler"
    ...
  />
 ...
</template>
<script>

hinsencamp

<template>
  <div>
    <div class="card-carousel">
     ...
    </div>
    <Indicators
      :elements="this.cards"
      :currentElementIndex="this.currentElementIndex"
      :showElement="this.showElement"
    />

hinsencamp

<template>
  <ul>
    <li
      v-for="(_, index) in elements"
      class="dot"
      :key="index"
      :class="{'dot-selected': currentElementIndex === index}"
    >
      <button
        class="indicator-btn"

hinsencamp

<template>
  <div>
    <div class="card-carousel">
      <ArrowButton
        arrowType="left"
        :onClick="showPrevElement"
        :disabled="this.reachedMaxLeft"
      />
      ...
    </div>

hinsencamp

<script>
...
export default {
...
 computed: {
   ...
    reachedMaxLeft() {
      return this.currentElementIndex === 0;
    },
    reachedMaxRight() {

hinsencamp

<template>
  <button class="btn" @click="onClick">
    <img
      class="icon"
      :src="require(`@/assets/svg/${arrowType}.svg`)"
      :alt="arrowType + ' arrow'"
    >
  </button>
</template>
<script>

hinsencamp

<template>
...
 <div class="section">
  <h2>{{this.sections[0].headline}}</h2>
  <Carousel :cards="cards" />
 </div>
...
<template>

hinsencamp

<script>
export default {
  name: "Carousel",
  props: { cards: Array },
  components: { Card },

  data() {
    return {
      currentElementIndex: 0
    };

hinsencamp

<template>
 <div>
  <div class="card-carousel">
   <Card
    class="current-element"
    :headline="currentElement.headline"
    :infoText="currentElement.infoText"
    :imgName="currentElement.imgName"
   />
  </div>

hinsencamp

<template>
...
 <main>
      <h1>{{ headline }}</h1>
      <Card
        class="current-element"
        :headline="cards[0].headline"
        :text="cards[0].text"
        :imgName="cards[0].imgName"
      />