Skip to content

[BUG]: The Dapps section renders a broken Swiper carousel on mobile due to an invalid slidesPerView prop value #45

@justwasif

Description

@justwasif

Bug Description

Bug Description

The Dapps section renders a broken Swiper carousel on mobile due to an invalid slidesPerView prop value.

1. Second Swiper receives slidesPerView={-1} on mobile

  • In Dapps.tsx, the second Swiper uses slidesPerView={props.slidesPerView - 2}. On mobile, slidesPerView is set to 1 in App.tsx, making this slidesPerView={-1}. Swiper does not handle negative values gracefully and breaks the carousel.

Proposed Approach

For Issue 1 — Guard against invalid slidesPerView:

  • Clamp the value before passing it to Swiper: slidesPerView={Math.max(1, props.slidesPerView - 2)}
  • Or conditionally render the second Swiper only when props.slidesPerView > 2

Steps to Reproduce

Steps to Reproduce*

  1. Open the site on a mobile device or resize browser to ≤ 640px
  2. Scroll down to the "Stablecoins based on the Djed Protocol" section
  3. Observe the second Swiper carousel (containing "Djed powered by COTI" and "Zephyr Stable Dollar") — it renders broken or invisible
  4. In the browser console, Swiper will log a warning/error about the invalid slidesPerView value

Logs and Screenshots

No response

Environment Details

No response

Impact

Medium - Feature works but has issues

Code of Conduct

  • I have joined the Discord server and will post updates there
  • I have searched existing issues to avoid duplicates

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions