Допустим, имея массив изображений:
images: ['https://picsum.photos/id/236/800/200', ....],
и индекс активного изображения:
indexActiveImage: 0,
можно изменять индекс активного изображения, используя следующий метод:
changeImage(count) {
switch (count) {
case 1:
if (this.indexActiveImage < this.images.length - 1)
this.indexActiveImage++;
break;
case -1:
if (this.indexActiveImage > 0)
this.indexActiveImage--;
break;
}
}
Привожу полный пример рабочего варианта
new Vue({
el: "#app",
data: {
indexActiveImage: 0,
images: ['https://picsum.photos/id/236/800/200', 'https://picsum.photos/id/237/800/200', 'https://picsum.photos/id/238/800/200', 'https://picsum.photos/id/239/800/200', 'https://picsum.photos/id/240/800/200']
},
methods: {
changeImage(count) {
switch (count) {
case 1:
if (this.indexActiveImage < this.images.length - 1)
this.indexActiveImage++;
break;
case -1:
if (this.indexActiveImage > 0)
this.indexActiveImage--;
break;
}
}
},
})
.slide-fade-enter-active {
transition: all 0.3s ease 0.2s;
}
.slide-fade-leave-active {
transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
transform: translateY(-20px);
opacity: 0;
}
<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<!-- Load polyfills to support older browsers -->
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<!-- Load the following for BootstrapVueIcons support -->
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="app">
<b-container fluid>
<b-row class="align-items-center py-2">
<b-col sm="1">
<button v-if="indexActiveImage > 0" class="btn btn-secondary" @click="changeImage(-1)"><</button>
</b-col>
<b-col sm="10">
{{ indexActiveImage+1 }} из {{ images.length }}- <b>{{ images[indexActiveImage] }}</b>
</b-col>
<b-col sm="1">
<button v-if="indexActiveImage < images.length - 1" class="btn btn-secondary" @click="changeImage(1)">></button>
</b-col>
</b-row>
<b-row>
<b-col id="productCardImages_main">
<transition name="slide-fade" mode="out-in">
<b-img v-if="images[indexActiveImage]" fluid-grow :src="images[indexActiveImage]" :key="indexActiveImage"></b-img>
</transition>
</b-col>
</b-row>
</b-container>
</div>