|
@ -2,12 +2,11 @@ |
|
|
<div class="Carousel"> |
|
|
<div class="Carousel"> |
|
|
<img src="./images/arrow.svg" @click="prevSlide" class="arrow" /> |
|
|
<img src="./images/arrow.svg" @click="prevSlide" class="arrow" /> |
|
|
|
|
|
|
|
|
<VueSlickCarousel style="width: 100%" v-if="pictures.length > 0" v-bind="settings" ref="CarouselRef" |
|
|
<VueSlickCarousel v-if="pictures.length > 0" v-bind="settings" ref="CarouselRef" class="vueSlickCarousel"> |
|
|
class="vueSlickCarousel"> |
|
|
|
|
|
<div v-for="(item, index) in pictures" :key="index" class="item"> |
|
|
<div v-for="(item, index) in pictures" :key="index" class="item"> |
|
|
<!-- <img :src="require(`@screen/images/${item}`)" style="height: 100%"> --> |
|
|
<!-- <img :src="require(`@screen/images/${item}`)" style="height: 100%"> --> |
|
|
<!-- <img :src="item" style="height: 100%"> --> |
|
|
<!-- <img :src="item" style="height: 100%"> --> |
|
|
<el-image style="height: 100%;width:100%" :src="item" :preview-src-list="pictures"> |
|
|
<el-image style="height: 100%" :src="item" :preview-src-list="pictures"> |
|
|
</el-image> |
|
|
</el-image> |
|
|
</div> |
|
|
</div> |
|
|
</VueSlickCarousel> |
|
|
</VueSlickCarousel> |
|
@ -48,7 +47,7 @@ export default { |
|
|
infinite: true, |
|
|
infinite: true, |
|
|
arrows: false, |
|
|
arrows: false, |
|
|
speed: 600, |
|
|
speed: 600, |
|
|
slidesToShow: 3, |
|
|
slidesToShow: 1, |
|
|
slidesToScroll: 1, |
|
|
slidesToScroll: 1, |
|
|
autoplay: true, |
|
|
autoplay: true, |
|
|
autoplaySpeed: 1800, |
|
|
autoplaySpeed: 1800, |
|
@ -77,37 +76,20 @@ export default { |
|
|
.vueSlickCarousel { |
|
|
.vueSlickCarousel { |
|
|
flex: 1; |
|
|
flex: 1; |
|
|
overflow: hidden; |
|
|
overflow: hidden; |
|
|
width: 100%; |
|
|
|
|
|
|
|
|
|
|
|
::v-deep { |
|
|
::v-deep { |
|
|
.slick-list { |
|
|
.slick-list { |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
width: 100%; |
|
|
|
|
|
|
|
|
|
|
|
.slick-track { |
|
|
|
|
|
width: 100% !important; |
|
|
|
|
|
height: 100% !important; |
|
|
|
|
|
|
|
|
|
|
|
.slick-slide { |
|
|
|
|
|
width: 100% !important; |
|
|
|
|
|
|
|
|
|
|
|
div { |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
div { |
|
|
|
|
|
height: 100%; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.item { |
|
|
.item { |
|
|
img { |
|
|
img { |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
width: 100%; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|