50 lines
1.6 KiB
Vue
50 lines
1.6 KiB
Vue
<template>
|
|
<carousel
|
|
:perPageCustom="[
|
|
[320, 1],
|
|
[480, 2],
|
|
[768, 3]
|
|
]"
|
|
:loop="true"
|
|
:navigationEnabled="true"
|
|
:paginationEnabled="false"
|
|
:navigationPrevLabel="arrowLeft"
|
|
:navigationNextLabel="arrowRight"
|
|
>
|
|
<slide v-for="movie in dataSource" :key="movie.imdbID">
|
|
<MovieCard :loading="loading" :movie="movie" />
|
|
</slide>
|
|
</carousel>
|
|
</template>
|
|
|
|
<script>
|
|
import { Carousel, Slide } from "vue-carousel";
|
|
import { mapState } from "vuex";
|
|
import { Icon } from "ant-design-vue";
|
|
|
|
export default {
|
|
components: { Carousel, Slide, Icon },
|
|
props: {
|
|
dataSource: {
|
|
type: Array,
|
|
default: []
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
loading: "loading"
|
|
})
|
|
},
|
|
data() {
|
|
return {
|
|
arrowLeft:
|
|
'<svg viewBox="64 64 896 896" data-icon="arrow-left" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M872 474H286.9l350.2-304c5.6-4.9 2.2-14-5.2-14h-88.5c-3.9 0-7.6 1.4-10.5 3.9L155 487.8a31.96 31.96 0 0 0 0 48.3L535.1 866c1.5 1.3 3.3 2 5.2 2h91.5c7.4 0 10.8-9.2 5.2-14L286.9 550H872c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path></svg>',
|
|
arrowRight:
|
|
'<svg viewBox="64 64 896 896" data-icon="arrow-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M869 487.8L491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h-88.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91.5c1.9 0 3.8-.7 5.2-2L869 536.2a32.07 32.07 0 0 0 0-48.4z"></path></svg>'
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style></style>
|