slider.png [ 39.67 KiB | Megtekintve 1020 alkalommal ]

<template>
    <div class="nk-image-slider" data-autoplay="8000">
          <div class="nk-image-slider-item" v-for="slider in sliders" :key="slider.id">
              <img v-bind:src="slider.image" alt="" class="nk-image-slider-img" data-thumb="">
              <div class="nk-image-slider-content">
                      <h3 class="h4">{{ slider.title }}</h3>
                      <p class="text-white">{{ slider.text }}</p>
                      <a href="#" class="nk-btn nk-btn-rounded nk-btn-color-white nk-btn-hover-color-main-1">Read More</a>
              </div>
          </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
        sliders: []
    }
  },
  mounted() {
        this.axios
            .get('/api/sliders')
            .then(response => {
                this.sliders = response.data;
            });
    }
}
</script>

[
    {
        "id": 8,
        "title": "Teszt2",
        "text": "Teszt2 uzenet",
        "readmore": "https://decikeee.hu",
        "image": "https://steamcdn-a.akamaihd.net/steam/apps/730/capsule_616x353.jpg",
        "image_thumb": "https://steamcdn-a.akamaihd.net/steam/apps/730/capsule_616x353.jpg",
        "created_at": "2020-11-23T08:37:29.000000Z",
        "updated_at": "2020-11-23T08:37:29.000000Z"
    },
    {
        "id": 7,
        "title": "Teszt",
        "text": "Tesztuzenet",
        "readmore": "https://google.hui",
        "image": "https://www.gamebyte.com/wp-content/uploads/2019/08/maxresdefault-4.jpg",
        "image_thumb": "https://www.gamebyte.com/wp-content/uploads/2019/08/maxresdefault-4.jpg",
        "created_at": "2020-11-23T08:30:11.000000Z",
        "updated_at": "2020-11-23T08:30:11.000000Z"
    }
]