:root { --van-swipe-indicator-size: 6px; --van-swipe-indicator-margin: var(--van-padding-sm); --van-swipe-indicator-active-opacity: 1; --van-swipe-indicator-inactive-opacity: 0.3; --van-swipe-indicator-active-background: var(--van-primary-color); --van-swipe-indicator-inactive-background: var(--van-border-color); } .van-swipe { position: relative; overflow: hidden; transform: translateZ(0); cursor: -webkit-grab; cursor: grab; -webkit-user-select: none; user-select: none; } .van-swipe__track { display: flex; height: 100%; } .van-swipe__track--vertical { flex-direction: column; } .van-swipe__indicators { position: absolute; bottom: var(--van-swipe-indicator-margin); left: 50%; display: flex; transform: translate(-50%); } .van-swipe__indicators--vertical { top: 50%; bottom: auto; left: var(--van-swipe-indicator-margin); flex-direction: column; transform: translateY(-50%); } .van-swipe__indicators--vertical .van-swipe__indicator:not(:last-child) { margin-bottom: var(--van-swipe-indicator-size); } .van-swipe__indicator { width: var(--van-swipe-indicator-size); height: var(--van-swipe-indicator-size); background-color: var(--van-swipe-indicator-inactive-background); border-radius: 100%; opacity: var(--van-swipe-indicator-inactive-opacity); transition: opacity var(--van-duration-fast), background-color var(--van-duration-fast); } .van-swipe__indicator:not(:last-child) { margin-right: var(--van-swipe-indicator-size); } .van-swipe__indicator--active { background-color: var(--van-swipe-indicator-active-background); opacity: var(--van-swipe-indicator-active-opacity); } .van-swipe-item { position: relative; flex-shrink: 0; width: 100%; height: 100%; }