49 lines
1.2 KiB
Vue
49 lines
1.2 KiB
Vue
<script setup>
|
|
import {ref} from "vue";
|
|
import {flightName} from "src/composables/flight";
|
|
import LatestFlightSliderInfo from "components/flights/slider/LatestFlightSliderInfo.vue";
|
|
|
|
const props = defineProps({
|
|
items: {
|
|
type: Array,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const slide = ref(0);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bg-blue-1 q-py-lg">
|
|
<h3 class="text-center">Poslední lety</h3>
|
|
|
|
<q-carousel
|
|
v-model="slide"
|
|
swipeable
|
|
animated
|
|
control-color="primary"
|
|
navigation
|
|
padding
|
|
arrows
|
|
height="500px"
|
|
class="bg-blue-1 text-white"
|
|
>
|
|
<q-carousel-slide :name="idx" v-for="(flight, idx) in items" :key="idx" class="column no-wrap flex-center text-center">
|
|
<q-img
|
|
:src="flight.titlePhoto.url"
|
|
fit="cover"
|
|
ratio="16/9"
|
|
style="max-width: 1000px;"
|
|
height="400px"
|
|
v-if="flight.titlePhoto"
|
|
>
|
|
<div class="absolute-bottom">
|
|
<LatestFlightSliderInfo :flight="flight"/>
|
|
</div>
|
|
</q-img>
|
|
<LatestFlightSliderInfo v-else :flight="flight" text-color="primary"/>
|
|
</q-carousel-slide>
|
|
</q-carousel>
|
|
</div>
|
|
</template>
|