From Pitfalls to Skill: Implementing a Peekable Horizontal Card Swipe with Vant

Problem

When using Vant van-swipe to build a horizontal card list that should show a fraction of the neighboring cards, two issues appear:

The last card is always partially clipped because a left margin pushes it outside the container.

The component’s default overflow: hidden hides the side portions of the cards, so the desired peek effect cannot be achieved.

Analysis

The root cause is that van-swipe both clips overflow and, when placed inside a parent that also has overflow: hidden, prevents any content from extending beyond its bounds. Simply setting overflow: visible on the component does not work because the parent container still clips the overflow.

Solution – Three‑Layer Nesting with Controlled Overflow

The layout is built with three nested layers:

Outer container – a plain wrapper that does not impose overflow rules.

Middle wrapper – applies overflow: hidden to clip only the excess part of the swipe track. Padding on this wrapper determines how much of the adjacent cards is visible.

Inner van-swipe component – forced to overflow: visible !important so that cards can “peek” out of the middle wrapper.

Key CSS configuration:

.swiper-peek-wrapper {
  padding-left: 15px;   /* left peek amount */
  padding-right: 7px;    /* right peek amount */
  width: 100%;
  overflow: hidden;    /* critical clipping layer */
}

:deep(.custom-swipe) {
  overflow: visible !important;   /* allow overflow */
  .van-swipe__wrap { overflow: visible; }
  .van-swipe__track { padding: 0 !important; display: flex; }
  .van-swipe-item { flex-shrink: 0; }   /* keep last card from being compressed */
}

.card { width: calc(100% - 8px); margin: 0 auto; }

HTML structure (the div elements are shown inside a code block, not as rendered tags):

<div class="swiper-peek">
  <div class="swiper-peek-wrapper">
    <van-swipe class="custom-swipe"
               :loop="false"
               :width="cardWidth"
               :show-indicators="false"
               :slides-per-view="1.5">
      <van-swipe-item v-for="item in items" :key="item.id">
        <div class="card"><!-- card content --></div>
      </van-swipe-item>
    </van-swipe>
  </div>
</div>

JavaScript (Vue 3) to compute the card width dynamically:

import { ref } from 'vue';
const cardWidth = ref(0);
const calculateCardWidth = () => {
  // 60 % of viewport width matches slides-per-view="1.5"
  cardWidth.value = Math.floor(window.innerWidth * 0.6);
};
calculateCardWidth();

Important component props: :slides-per-view="1.5" (or 2.2) – shows one full card plus a fraction of the next. :loop="false" – disables circular scrolling to avoid boundary clipping. :show-indicators="false" – hides the default pagination dots.

Why It Works

The middle wrapper clips only the overflow that exceeds the intended peek area, while the inner swipe component is allowed to render beyond that clipping boundary. Padding on the wrapper directly controls the visible side portions, and flex-shrink: 0 guarantees that the last card retains its full width instead of being compressed.

Self‑Test Checklist

Confirm .swiper-peek-wrapper has overflow: hidden and the expected left/right padding.

Confirm .custom-swipe (the van-swipe element) has overflow: visible.

Check that .van-swipe__track has padding: 0 and display: flex.

Verify .van-swipe-item includes flex-shrink: 0.

Ensure the last card is fully visible and not clipped.

Visual Confirmation

Resulting layout shows a full card in the centre with a partial view of the previous and next cards, and the final card remains completely visible.