<template>
  <div class="home--page page--container">
    <section class="s1">
      <div class="slider" id="slider">
        <div class="slide" v-for="slide in slider" :key="slide._id">
          <img :src="slide.image" :alt="slide.caption">
          <div class="txt">
            <p>{{ slide.caption }}</p>
          </div>
        </div>
      </div>
      <!--      <div class="btns">-->
      <!--        <div class="next"> ></div>-->
      <!--        <div class="prev"> <</div>-->
      <!--      </div>-->
    </section>
    <SiteFooter/>
  </div>
</template>

<script>
if (process.client) require('slick-carousel')
export default {
  data() {
    return {
      slider: null
    }
  },
  computed: {
    preLoader() {
      return this.$store.state.global_vars.preLoader
    }
  },
  watch: {
    preLoader: function () {
      this.slideInterval = setInterval(() => {
        if (!this.sliding) $('.slider .btns .next').click()
      }, (this.autoSlideTime * 1000) + (this.slideDuration * 1000))
    }
  },
  mounted() {
    $(document).ready(() => {
      $('#slider').slick({
        slidesToShow: 1,
        rtl: true,
        dots: true,
        arrows: true,
        autoplay: true,
        autoplaySpeed: 6000,
        responsive: [
          {
            breakpoint: 768,
            settings: {
              arrows: false
            }
          }
        ]
      })
    })
  },
  async asyncData({$axios}) {
    const slider = await $axios.get('/api/public/slider')
    return {
      slider: slider.data
    }
  }
}
</script>

