1

Нужно сделать показ и переключение массива изображений в одном блоке

введите сюда описание изображения

Пока могу выводить одно изображение с помощью бутстрапа:

<b-form-group id="input-group-productCardImages_main" label="Основное изображение:" label-for="productCardImages_main">
     <div class="input-catalog form-control d-flex justify-content-between" id="productCardImages_main">
        <div>
            <b-img fluid :src="form.productCardImages_main_url" />
        </div>
        <div>
            <i class="fa fa-pencil-square-o fa-lg" aria-hidden="true" @click="imageUpload" ></i>
        </div>
     </div>
</b-form-group>

Любые идеи?

1 ответ 1

1

Допустим, имея массив изображений:

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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.