mohadese namavar
52 lines
1.5 KiB
Vue
52 lines
1.5 KiB
Vue
<template>
|
|
<section class="top-slider">
|
|
<template v-for="(btn, i) in btns.arrows" :key="i">
|
|
<Button v-if="device == 'desktop'" v-bind="btn" />
|
|
</template>
|
|
<Swiper v-bind="swipers.topSlider">
|
|
<SwiperSlide v-for="{ link, images, title, id } in sliders" :key="id">
|
|
<router-link :to="link">
|
|
<img :title="title" :src="images[device] + '?w=1980'" />
|
|
</router-link>
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { swipers, btns } = inject('init')
|
|
const { device } = inject('service')
|
|
const { sliders } = inject('data')
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.top-slider {
|
|
@apply w-full h-max flex z-0;
|
|
|
|
.swiper {
|
|
@apply w-full h-max;
|
|
|
|
.swiper-wrapper {
|
|
@apply z-0 h-max bg-gray-50;
|
|
|
|
.swiper-slide {
|
|
@apply w-screen h-full;
|
|
|
|
a {
|
|
img {
|
|
@apply w-full object-cover h-full;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&>button {
|
|
@apply self-center absolute p-0 bg-white/40 border-none max-lg:hidden z-10 #{!important};
|
|
@apply lg:w-8 lg:h-8 lg:text-base lg:first-of-type:right-8 lg:last-of-type:left-9 #{!important};
|
|
@apply xl:w-9 xl:h-9 xl:text-lg xl:first-of-type:right-12 xl:last-of-type:left-12 #{!important};
|
|
@apply 2xl:w-10 2xl:h-10 2xl:text-xl 2xl:first-of-type:right-16 2xl:last-of-type:left-16 #{!important};
|
|
}
|
|
}
|
|
</style>
|