You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
1.5 KiB
70 lines
1.5 KiB
<template>
|
|
<v-responsive max-width="1365" class="mx-auto">
|
|
<v-container>
|
|
<v-carousel
|
|
v-model="activeIndex"
|
|
height="auto"
|
|
class="exhibition-swiper mt-5"
|
|
hide-delimiters
|
|
cycle
|
|
>
|
|
<v-carousel-item
|
|
v-for="(caRow, i) in displayCarouselRows"
|
|
:key="`ca_item_${i}`"
|
|
>
|
|
<v-row>
|
|
<v-col v-for="(ad, index) in ads.slice(0, 3)" :key="index" cols="4">
|
|
<a :href="ad.url">
|
|
<v-img
|
|
width="100%"
|
|
:src="ad.image"
|
|
class="mx-auto rounded-xl my-auto"
|
|
/>
|
|
</a>
|
|
</v-col>
|
|
</v-row>
|
|
</v-carousel-item>
|
|
</v-carousel>
|
|
</v-container>
|
|
</v-responsive>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: ["ads"],
|
|
name: "ExhibitionCarousel",
|
|
data: () => ({
|
|
activeIndex: 0,
|
|
carouselItems: Array(15).fill(1),
|
|
}),
|
|
computed: {
|
|
displayCarouselRows() {
|
|
const { carouselItems } = this;
|
|
const ret = [];
|
|
for (let i = 0; i < carouselItems.length; i += 3) {
|
|
ret.push([
|
|
carouselItems[i],
|
|
carouselItems[i + 1],
|
|
carouselItems[i + 2],
|
|
]);
|
|
}
|
|
return ret;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.exhibition-swiper {
|
|
padding: 0 96px;
|
|
|
|
.v-window__prev {
|
|
left: auto;
|
|
right: 100%;
|
|
}
|
|
.v-window__next {
|
|
right: auto;
|
|
left: 100%;
|
|
}
|
|
}
|
|
</style>
|