hamid.zarghami1@gmail.com
70 lines
1.5 KiB
Vue
70 lines
1.5 KiB
Vue
<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>
|
|
|