---
name: "SwiperItem"
mode: "component"
versionRequirements:
  - { name: "@ray-js/ray", version: "0.5.10" }
title: "SwiperItem - Swiper child item"
---

## SwiperItem

> [VERSION] @ray-js/ray >= 0.5.10

### Description

Slide view item that can only be placed inside the Swiper component; width and height are automatically set to 100%.


### Examples

#### Basic usage

```tsx
import React, { useState } from 'react';
import { Swiper, SwiperItem, View, Text } from '@ray-js/ray';

export default function BasicSwiperItem() {
  const [current, setCurrent] = useState(0);
  const colors = ['#1890ff', '#52c41a', '#faad14'];

  return (
    <Swiper
      style={{ width: '702rpx', height: '200rpx' }}
      autoplay
      interval={2500}
      dots
      current={current}
      onChange={(e) => setCurrent(e.current)}
    >
      {colors.map((color, index) => (
        <SwiperItem key={index}>
          <View
            style={{
              width: '100%',
              height: '100%',
              backgroundColor: color,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            <Text style={{ color: '#fff' }}>Page {index + 1}</Text>
          </View>
        </SwiperItem>
      ))}
    </Swiper>
  );
}
```