primefaces / primevue

Next Generation Vue UI Component Library
https://primevue.org
MIT License
9.86k stars 1.19k forks source link

Carousel component items disappear on mobile after swiping (翻頁後輪播圖內的項目消失) #6400

Open Wuchieh opened 5 days ago

Wuchieh commented 5 days ago

Describe the bug

We encountered an issue with the Carousel component in PrimeVue. When a user navigates to a page that includes the Carousel component on a smaller screen device (e.g., mobile phones), the items inside the carousel disappear after attempting to swipe. Only the navigation arrows and dots remain visible, but the carousel content itself is gone. This behavior significantly impacts the functionality on smaller devices.

我們在使用 PrimeVue 的 Carousel 組件時遇到了一個問題。當用戶使用較小螢幕的設備(如手機)進入包含 Carousel 組件的頁面後,嘗試翻頁會導致輪播圖內的項目消失,僅剩下控制箭頭和導航點。這個問題在小螢幕設備上影響了輪播圖的正常使用。

Reproducer

https://stackblitz.com/edit/zsak5d?file=src%2FApp.vue

PrimeVue version

4.0.5

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Chrome, Edge, android chrome

Steps to reproduce the behavior

  1. Use a mobile device or simulate a small screen environment.
  2. Navigate to a page that contains a PrimeVue Carousel component.
  3. Attempt to swipe through the carousel slides.
  4. Observe that the items inside the carousel disappear after swiping, leaving only the control arrows and navigation dots.

===================================

  1. 使用手機或模擬小螢幕環境。
  2. 進入包含 PrimeVue Carousel 組件的頁面。
  3. 嘗試翻頁輪播。
  4. 發現翻頁後輪播圖內的項目消失,僅剩下控制箭頭和導航點。

Expected behavior

The carousel items should be displayed correctly after swiping, and the user should be able to smoothly navigate through the slides.

輪播圖內的項目應正常顯示,用戶應能順利翻頁並看到所有內容。

Wuchieh commented 4 days ago

This video https://youtube.com/shorts/N5-Se0TxqYM