97 lines
2.2 KiB
Vue
97 lines
2.2 KiB
Vue
|
<template>
|
||
|
|
<div class="image-carousel">
|
||
|
|
<div class="control-button prev" @click="prevImage">
|
||
|
|
<img src="@/assets/images/icon_08.png" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="carousel-container">
|
||
|
|
<div class="hh100" :style="{transform: `translateX(-${currentIndex * 100}%)`}">
|
||
|
|
<ul class="image-wrapper" style="margin-bottom:1%;">
|
||
|
|
<li v-for="(image, index) in images" :key="index" class="image-item">
|
||
|
|
<img :src="image" alt="carousel image">
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<ul class="image-wrapper">
|
||
|
|
<li v-for="(image, index) in images" :key="index" class="image-item">
|
||
|
|
<img :src="image" alt="carousel image">
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="control-button next" @click="nextImage">
|
||
|
|
<img src="@/assets/images/icon_07.png" alt="">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
currentIndex: 0,
|
||
|
|
images: [
|
||
|
|
require('@/assets/images/person.png'),
|
||
|
|
require('@/assets/images/person.png'),
|
||
|
|
require('@/assets/images/person.png'),
|
||
|
|
require('@/assets/images/person.png')
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
prevImage() {
|
||
|
|
this.currentIndex = this.currentIndex > 0 ? this.currentIndex - 1 : this.images.length - 1
|
||
|
|
},
|
||
|
|
nextImage() {
|
||
|
|
this.currentIndex = this.currentIndex < this.images.length - 1 ? this.currentIndex + 1 : 0
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.image-carousel {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
position: relative;
|
||
|
|
padding: 30px 20px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
.carousel-container {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.image-wrapper {
|
||
|
|
display: flex;
|
||
|
|
height: 49.5%;
|
||
|
|
transition: transform 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.image-item {
|
||
|
|
width: 24%;
|
||
|
|
margin: 0 1%;
|
||
|
|
height: 100%;
|
||
|
|
img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
object-fit: cover;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.control-button {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s;
|
||
|
|
color: #fff;
|
||
|
|
z-index: 1;
|
||
|
|
&.prev {
|
||
|
|
left: 0;
|
||
|
|
}
|
||
|
|
&.next {
|
||
|
|
right: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|