Carousel primevue 宽度减小

Question

第一张幻灯片的宽度正常，但后续图片的宽度越来越小。 有人知道为什么吗？

这是我的代码。

<div class="col-12 md:col-6 overflow-hidden">
  <Carousel :value="products" :numVisible="1" :numScroll="1"
            circular 
            :responsiveOptions="carouselResponsiveOptions"
            :autoplayInterval="1000"
            :showNavigators="false">
    <template #item="product">
      <img
          :src="'demo/images/product/' + product.data.image" 
          :alt="product.data.name" 
          class="md:ml-auto block md:h-full"
      />
    </template>
  </Carousel>    
</div>

<script setup>
import ProductService from '@/service/ProductService';
import PhotoService from '@/service/PhotoService';
import { ref, onMounted } from 'vue';

const products = ref([]);
const images = ref([]);
const carouselResponsiveOptions = ref([
    {
        breakpoint: '1024px',
        numVisible: 3,
        numScroll: 3
    },
    {
        breakpoint: '768px',
        numVisible: 2,
        numScroll: 2
    },
    {
        breakpoint: '1020px',
        numVisible: 1,
        numScroll: 1
    }
]);

const productService = new ProductService();
const photoService = new PhotoService();

onMounted(() => {
    productService.getProductsSmall().then((data) => (products.value = data));
    photoService.getImages().then((data) => (images.value = data));
});
</script>

我在Carousel prime vue width returns中发现了同样的问题，但仍然不知道如何解决。 任何建议将不胜感激。

Answer 1

您的图像必须是

width: 100%

才能使

carousel

正常工作，我尝试了没有 100% 宽度的不同方法，但轮播无法正常工作。

<Carousel :value="images" :numVisible="3" :numScroll="1"
            circular
            :autoplayInterval="1000"
            :responsiveOptions="carouselResponsiveOptions"
            >
    <template #item="slotProps">
      <div class="carousel-data">
        <img :src="slotProps.data.src" alt="">
      </div>
    </template>
</Carousel>

<script setup>
import {ref} from 'vue';

const images = ref(Array(10).fill({src: 'img/icons/android-chrome-512x512.png'}));
const carouselResponsiveOptions = ref([
  {breakpoint: '1024px', numVisible: 2, numScroll: 1},
  {breakpoint: '768px', numVisible: 1, numScroll: 1},
]);
</script>

<style>
img {
  display: block;
  width: 100%;
  height: auto;
  margin: auto;
}
<style>

希望这对您有帮助。