Skip to content

Items not rendered when windowSize > total in loop mode #918

@haejunejung

Description

@haejunejung

Describe the bug

When windowSize > total (data length after autoFillData) in loop mode, useVisibleRanges computes incorrect ranges that cause some carousel items to not render — resulting in blank/white screens at certain scroll positions.

This happens because the wrap-around correction logic in the loop branch overwrites positiveRange[0] while fixing negativeRange, causing the currently visible item's index to be excluded from the render range.

I intend to submit a PR for this issue.

To Reproduce

  1. Create a carousel with loop={true} (default), autoFillData={true} (default), and windowSize={5}
  2. Pass an array with 2 items as data
  • Internally, autoFillData duplicates it to 4 items ([A, B, A, B]), so total = 4
  • Now windowSize (5) > total (4)
  1. Enable autoPlay or swipe to currentIndex = 1
  2. The item at index 1 is not rendered — a blank/white screen appears

This also occurs with 3 items (total = 3) or 4 items (total = 4) whenever windowSize > total.

Root cause

In useVisibleRanges.tsx, the loop branch at currentIndex = 1, total = 4, windowSize = 5:

positiveCount = Math.round(5 / 2) = 3
negativeCount = 5 - 3 = 2

negativeRange = [(1-2+4)%4, (1-1+4)%4] = [3, 0]  // wraps around
positiveRange = [(1+4)%4, (1+3+4)%4]   = [1, 0]  // wraps around

// Correction logic triggers for negativeRange:
if (negativeRange[0] > negativeRange[1]) {  // 3 > 0 → true
  negativeRange[1] = total - 1;             // [3, 0] → [3, 3]
  positiveRange[0] = 0;                     // [1, 0] → [0, 0] ← overwrites!
}

positiveRange changes from [1, 0] (meaning indices 1,2,3,0) to [0, 0] (meaning only index 0). Index 1 — the currently visible item — is excluded from both ranges, so shouldRender returns false and the item is not rendered.

Expected behavior

When windowSize >= total, all items should be rendered since there are fewer items than the window size. The carousel should never produce blank screens due to range miscalculation.

Suggested fix

Add an early return in the loop branch when windowSize >= total:

...
  } else {
    currentIndex = currentIndex < 0 ? (currentIndex % total) + total : currentIndex;

    if (windowSize >= total) {
      newRanges = {
        negativeRange: [0, total - 1],
        positiveRange: [0, total - 1],
      };
    } else {
      // existing range calculation + correction logic
    }
  }

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions