Question

<template lang="pug">
b-carousel.d-none.d-sm-block(
  id='categoryRoulette'
  controls
  no-animation
  :interval='0'
  @sliding-start="onSlideStart"
  @sliding-end="onSlideEnd"
)
  b-carousel-slide(
    v-for="category in chunkedCatalog"
    :key="category.permalink"
  )
    template(v-slot:img)
      b-card-group(deck)
        b-card(
          v-for="(item, index) in category" :key="index"
          :img-src="item.image ? item.image : '../assets/images/blank.png'"
          img-alt='Image'
          img-top
          tag='article'
        )
          b-card-text.d-flex.justify-content-center.align-items-center
            h5
              a(href="#") {{ item.title }}
</template>

<script lang="ts">
import Vue from 'vue'
import testData from '../data/testData.json'
import { RouletteData } from '../types/roulette'

export default Vue.extend({
  data: (): RouletteData => ({
    slide: 0,
    sliding: false,
    catalog: [],
  }),
  computed: {
    chunkedCatalog() {
      const chunkedArray = []

      for (let i = 0; i < this.catalog.length; i += 3) {
        chunkedArray.push(this.catalog.slice(i, i + 3))
      }

      return chunkedArray
    },
  },
  mounted(): void {
    this.catalog = testData.catalog
  },
  methods: {
    onSlideStart(slide: any) {
      this.sliding = true
      console.log('slide =', slide)
    },
    onSlideEnd(slide: any) {
      this.sliding = false
      console.log('slide =', slide)
    },
  },
})
</script>

<style lang="sass">
#categoryRoulette
  margin-bottom: 40px
  margin-top: 40px
  .carousel-control-prev-icon
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232E86C1' class='bi bi-chevron-left' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E") !important
    height: 100px !important
    margin-left: -300px
    width: 100px !important
  .carousel-control-next-icon
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232E86C1' class='bi bi-chevron-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important
    height: 100px !important
    margin-right: -300px
    width: 100px !important
</style>

您需要创建一个可以同时显示 3 张幻灯片的轮播图，然后单击下一张/上一张按钮以显示下一张/上一张幻灯片。请注意 - 您不需要逐张显示，而是一次显示 3 张幻灯片。

我尝试使用数组并进行块处理，但这只能在数组结束之前有效。例如，如果我有 5 张幻灯片，它会显示前 3（可以）然后只显示 2（不可以）。按下一步按钮，前 3 张幻灯片将再次显示，依此类推。

它应该如何工作？您需要显示 5 张幻灯片中的前 3 张，在下一次单击时，您还需要显示 3 张幻灯片 - 5 张幻灯片中的最后 2 张，再次显示第一张幻灯片。下次单击时，应显示索引为 2、3 和 4 的幻灯片，依此类推。

在相反的方向（上一个），一切都一样。

BootstrapVue - 在轮播中循环 3 张幻灯片？

0 个答案: