|
@ -3,8 +3,9 @@ |
|
|
<img src="./images/arrow.svg" @click="prevSlide" class="arrow" /> |
|
|
<img src="./images/arrow.svg" @click="prevSlide" class="arrow" /> |
|
|
|
|
|
|
|
|
<VueSlickCarousel v-bind="settings" ref="CarouselRef" class="vueSlickCarousel"> |
|
|
<VueSlickCarousel v-bind="settings" ref="CarouselRef" class="vueSlickCarousel"> |
|
|
<div v-for="(item, index) in carouselItems" :key="index" class="item"> |
|
|
<div v-for="(item, index) in pictures" :key="index" class="item"> |
|
|
<img :src="require(`@screen/images/${item.imageURL}`)" style="height: 100%"> |
|
|
<!-- <img :src="require(`@screen/images/${item}`)" style="height: 100%"> --> |
|
|
|
|
|
<img :src="item" style="height: 100%"> |
|
|
</div> |
|
|
</div> |
|
|
</VueSlickCarousel> |
|
|
</VueSlickCarousel> |
|
|
|
|
|
|
|
@ -22,6 +23,19 @@ import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css' |
|
|
export default { |
|
|
export default { |
|
|
name: "Carousel", |
|
|
name: "Carousel", |
|
|
components: { VueSlickCarousel }, |
|
|
components: { VueSlickCarousel }, |
|
|
|
|
|
props: { |
|
|
|
|
|
pictures: { |
|
|
|
|
|
type: Array, |
|
|
|
|
|
default: () => [ |
|
|
|
|
|
"shareWith/message-active.svg", |
|
|
|
|
|
"shareWith/message.svg", |
|
|
|
|
|
"shareWith/website-active.svg", |
|
|
|
|
|
"shareWith/website.svg", |
|
|
|
|
|
"shareWith/weChat-active.svg", |
|
|
|
|
|
"shareWith/weChat-active.svg" |
|
|
|
|
|
] |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
carouselItems: [ |
|
|
carouselItems: [ |
|
|