<template>

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">

<div>
    <b-carousel
      id="carousel-1"
      v-model="slide"
      :interval="3000"
      controls
      indicators
      style="text-shadow: 1px 1px 2px #333;"
      @sliding-start="onSlideStart"
      @sliding-end="onSlideEnd"
    >
      <!-- Text slides with image -->
      <b-carousel-slide
       :img-src="image.image_url" :key="image.image_url" v-for="image in images"
      ></b-carousel-slide>

      

      

    </b-carousel>

  </div>

  <a class="carousel-control-prev" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</template>

<script>

import BannerService from '@/services/resources/BannerService';

const service = BannerService.build();

export default {
  name: 'custom-banner',
  data() {
    return {
      slide: 2,
      sliding: null,
      images: []
    };
  },
  methods: {
    
    onSlideStart() {
      this.sliding = true;
    },
    onSlideEnd() {
      this.sliding = false;
    },
    listBanners(){
      var vm = this;
      service.search({types: "SMALL",campaign: 'current',order_by: 'priority', order: 'DESC' })
      .then(resp => {
        vm.images = resp;
      })
      .catch( err => {
        console.log(err);
      });
    }
  },
    created(){
    this.listBanners();
  }
};
</script>
