### Install Dependencies and Start Application

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/examples/create-react-app/README.md

Install the necessary npm packages and start the development server.

```bash
npm install
npm run start
```

--------------------------------

### Download and Navigate to Example

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/examples/create-react-app/README.md

Use curl to download the example and then navigate into the created directory.

```bash
curl https://codeload.github.com/oliviertassinari/react-swipeable-views/tar.gz/v1-beta | tar -xz --strip=2 react-swipeable-views-master/examples/create-react-app
cd create-react-app
```

--------------------------------

### Install react-swipeable-views-native

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/native/packages/react-swipeable-views-native/README.md

Install the library using npm or yarn.

```sh
npm install --save react-swipeable-views-native
# or
yarn add react-swipeable-views-native
```

--------------------------------

### Install react-swipeable-views

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/docs/src/pages/getting-started/installation.md

Use this command to install the main react-swipeable-views package for browser implementations.

```sh
npm install --save react-swipeable-views
```

--------------------------------

### Combined Features Example

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/API-SUMMARY.md

An example demonstrating the combination of virtualization, keyboard navigation, and autoplay. This configuration is suitable for complex carousel implementations.

```javascript
let Enhanced = virtualize(SwipeableViews);
Enhanced = bindKeyboard(Enhanced);
Enhanced = autoPlay(Enhanced);

<Enhanced
  slideCount={1000}
  slideRenderer={({ index }) => <Slide index={index} />}
  autoplay={true}
  interval={4000}
  axis="x"
  enableMouseEvents
  animateHeight={false}
/>
```

--------------------------------

### Combined Utilities Example

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/api-reference/bindKeyboard.md

Integrates bindKeyboard with other utilities like autoPlay and virtualize for a feature-rich carousel. This example shows how to chain these higher-order components for enhanced functionality.

```javascript
import { bindKeyboard, autoPlay, virtualize } from 'react-swipeable-views-utils';

let EnhancedViews = bindKeyboard(SwipeableViews);
EnhancedViews = autoPlay(EnhancedViews);

export function FullFeaturedCarousel() {
  const [index, setIndex] = useState(0);

  return (
    <EnhancedViews
      index={index}
      onChangeIndex={setIndex}
      autoplay={true}
      interval={5000}
    >
      {slides}
    </EnhancedViews>
  );
}
```

--------------------------------

### Simple Browser Usage Example

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/README.md

A basic example demonstrating how to use SwipeableViews in a React web application. Ensure the component is imported correctly.

```jsx
import React from 'react';
import SwipeableViews from 'react-swipeable-views';

const styles = {
  slide: {
    padding: 15,
    minHeight: 100,
    color: '#fff',
  },
  slide1: {
    background: '#FEA900',
  },
  slide2: {
    background: '#B3DC4A',
  },
  slide3: {
    background: '#6AC0FF',
  },
};

const MyComponent = () => (
  <SwipeableViews>
    <div style={Object.assign({}, styles.slide, styles.slide1)}>
      slide n°1
    </div>
    <div style={Object.assign({}, styles.slide, styles.slide2)}>
      slide n°2
    </div>
    <div style={Object.assign({}, styles.slide, styles.slide3)}>
      slide n°3
    </div>
  </SwipeableViews>
);

export default MyComponent;
```

--------------------------------

### Install react-swipeable-views-native for Native

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/README.md

Use npm to install the react-swipeable-views-native package for experimental React Native support.

```sh
npm install --save react-swipeable-views-native
```

--------------------------------

### Virtualization Example

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/docs/src/pages/getting-started/usage.md

Demonstrates how to use the `virtualize` higher-order component for efficient rendering of a large number of slides. This is useful for performance optimization when dealing with many slides.

```jsx
import React from 'react';
import SwipeableViews from 'react-swipeable-views';
import { virtualize } from 'react-swipeable-views-utils';

const VirtualizeSwipeableViews = virtualize(SwipeableViews);

const slideRenderer = ({key, index}) => (
  <div key={key}>
    {`slide n°${index + 1}`}
  </div>
);

const MyComponent = () => (
  <VirtualizeSwipeableViews slideRenderer={slideRenderer} />
);

export default MyComponent;
```

--------------------------------

### onSwitching Callback Example

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/types.md

Demonstrates how to use the onSwitching callback to log the current slide index and event type during swipe interactions.

```jsx
<SwipeableViews
  onSwitching={(index, type) => {
    if (type === 'move') {
      console.log(`Dragging to ${index}`);
    } else if (type === 'end') {
      console.log(`Landed on ${Math.round(index)}`);
    }
  }}>
  {slides}
</SwipeableViews>
```

--------------------------------

### Basic Carousel Setup

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/API-SUMMARY.md

Demonstrates the basic setup for a swipeable carousel using SwipeableViews. It manages the current slide index with React's useState hook.

```javascript
import SwipeableViews from 'react-swipeable-views';

const [index, setIndex] = useState(0);

<SwipeableViews index={index} onChangeIndex={setIndex}>
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</SwipeableViews>
```

--------------------------------

### AutoPlaySwipeableViews Usage Example

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/configuration.md

This example demonstrates how to use the AutoPlaySwipeableViews component with custom autoplay and interval settings. Ensure you have the necessary slides defined.

```javascript
<AutoPlaySwipeableViews
  autoplay={true}
  interval={5000}
  axis="x"
  enableMouseEvents
  animateTransitions
>
  {slides}
</AutoPlaySwipeableViews>
```

--------------------------------

### Example: Virtualized Slide Rendering

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/types.md

Demonstrates how to use the slideRenderer prop with VirtualizedViews to render individual slides. The renderer receives index and key for each slide.

```jsx
<VirtualizedViews
  slideCount={1000}
  slideRenderer={({ index, key }) => (
    <div key={key}>
      <img src={images[index]} alt={`Slide ${index}`} />
    </div>
  )}
/>
```

--------------------------------

### Image Gallery with Virtualization

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/api-reference/virtualize.md

An example of using `virtualize` to create an image gallery. Each slide renders an image with its title and description, optimizing performance for a large number of images.

```javascript
export function ImageGallery() {
  const images = [
    { id: 1, url: 'image1.jpg', title: 'Image 1', description: 'First image' },
    { id: 2, url: 'image2.jpg', title: 'Image 2', description: 'Second image' },
    // ... more images
  ];

  const VirtualizedViews = virtualize(SwipeableViews);

  return (
    <VirtualizedViews
      slideCount={images.length}
      slideRenderer={({ index }) => {
        const img = images[index];
        return (
          <div style={{ textAlign: 'center', padding: 20 }}>
            <img 
              src={img.url} 
              alt={img.title}
              style={{ maxWidth: '100%', maxHeight: '80vh' }}
            />
            <h3>{img.title}</h3>
            <p>{img.description}</p>
          </div>
        );
      }}
      overscanSlideBefore={1}
      overscanSlideAfter={1}
    />
  );
}
```

--------------------------------

### Example Usage of SpringConfig

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/types.md

Demonstrates how to apply custom spring animation configurations to SwipeableViews. This allows for fine-grained control over the visual feedback during transitions.

```jsx
<SwipeableViews
  springConfig={{
    duration: '0.5s',
    easeFunction: 'ease-in-out',
    delay: '0s'
  }}>
  {slides}
</SwipeableViews>
```

--------------------------------

### AutoPlay Example

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/docs/src/pages/getting-started/usage.md

Shows how to implement auto-play functionality using the `autoPlay` higher-order component. This component automatically transitions between slides after a set interval.

```jsx
import React from 'react';
import SwipeableViews from 'react-swipeable-views';
import { autoPlay } from 'react-swipeable-views-utils';

const AutoPlaySwipeableViews = autoPlay(SwipeableViews);

const MyComponent = () => (
  <AutoPlaySwipeableViews>
    <div>slide n°1</div>
    <div>slide n°2</div>
    <div>slide n°3</div>
  </AutoPlaySwipeableViews>
);

export default MyComponent;
```

--------------------------------

### Basic Keyboard Navigation Example

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/api-reference/bindKeyboard.md

Demonstrates how to use bindKeyboard to enable basic left/right arrow key navigation for a carousel. Requires importing SwipeableViews and bindKeyboard from react-swipeable-views-utils.

```javascript
import React, { useState } from 'react';
import SwipeableViews from 'react-swipeable-views';
import { bindKeyboard } from 'react-swipeable-views-utils';

const KeyboardSwipeableViews = bindKeyboard(SwipeableViews);

export function BasicKeyboardCarousel() {
  const [index, setIndex] = useState(0);

  return (
    <div>
      <p>Use arrow keys to navigate</p>
      <KeyboardSwipeableViews
        index={index}
        onChangeIndex={setIndex}
      >
        <div style={{ padding: 40, background: '#ff9999' }}>Slide 1</div>
        <div style={{ padding: 40, background: '#99ff99' }}>Slide 2</div>
        <div style={{ padding: 40, background: '#9999ff' }}>Slide 3</div>
      </KeyboardSwipeableViews>
    </div>
  );
}
```

--------------------------------

### Simple Native Usage Example

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/README.md

An example of using SwipeableViews with React Native. Note that native support is experimental. Import SwipeableViews from 'react-swipeable-views-native'.

```jsx
import React from 'react';
import {
  StyleSheet,
  Text,
  View,
} from 'react-native';

import SwipeableViews from 'react-swipeable-views-native';
// There is another version using the scroll component instead of animated.
// I'm unsure which one give the best UX. Please give us some feedback.
// import SwipeableViews from 'react-swipeable-views-native/lib/SwipeableViews.scroll';

const styles = StyleSheet.create({
  slideContainer: {
    height: 100,
  },
  slide: {
    padding: 15,
    height: 100,
  },
  slide1: {
    backgroundColor: '#FEA900',
  },
  slide2: {
    backgroundColor: '#B3DC4A',
  },
  slide3: {
    backgroundColor: '#6AC0FF',
  },
  text: {
    color: '#fff',
    fontSize: 16,
  },
});

const MyComponent = () => (
  <SwipeableViews style={styles.slideContainer}>
    <View style={[styles.slide, styles.slide1]}>
      <Text style={styles.text}>
        slide n°1
      </Text>
    </View>
    <View style={[styles.slide, styles.slide2]}>
      <Text style={styles.text}>
        slide n°2
      </Text>
    </View>
    <View style={[styles.slide, styles.slide3]}>
      <Text style={styles.text}>
        slide n°3
      </Text>
    </View>
  </SwipeableViews>
);

export default MyComponent;
```

--------------------------------

### KeyboardSwipeableViews Setup

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/API-SUMMARY.md

Integrate the bindKeyboard HOC to enable keyboard navigation for SwipeableViews. Supports arrow keys for horizontal and vertical swiping.

```javascript
<KeyboardSwipeableViews
  axis="x"
  slideCount={3}
>
  {slides}
</KeyboardSwipeableViews>
```

--------------------------------

### Keyboard Navigation Example

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/docs/src/pages/getting-started/usage.md

Illustrates how to enable keyboard navigation for SwipeableViews using the `bindKeyboard` higher-order component. This allows users to switch slides using arrow keys.

```jsx
import React from 'react';
import SwipeableViews from 'react-swipeable-views';
import { 	bindKeyboard } from 'react-swipeable-views-utils';

const BindKeyboardSwipeableViews = bindKeyboard(SwipeableViews);

const MyComponent = () => (
  <BindKeyboardSwipeableViews>
    <div>slide n°1</div>
    <div>slide n°2</div>
    <div>slide n°3</div>
  </BindKeyboardSwipeableViews>
);

export default MyComponent;
```

--------------------------------

### Out-of-Bounds Index Warning Example

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/errors.md

This example demonstrates how an out-of-bounds index prop triggers a development-only warning. Ensure the index prop is within the valid range of children.

```javascript
// ❌ This triggers warning (3 slides, index out of bounds)
<SwipeableViews index={5}>
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</SwipeableViews>
// Console: "react-swipeable-view: the new index: 5 is out of bounds: [0-3]."
```

```javascript
// ✅ Valid indices only
<SwipeableViews index={Math.min(Math.max(0, index), 2)}>
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</SwipeableViews>
```

--------------------------------

### Accessible Keyboard Carousel Example

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/api-reference/bindKeyboard.md

Demonstrates how to create an accessible carousel using bindKeyboard. It includes ARIA roles and tabIndex for proper focus management and keyboard interaction.

```javascript
export function AccessibleKeyboardCarousel() {
  const [index, setIndex] = useState(0);

  const KeyboardSwipeableViews = bindKeyboard(SwipeableViews);

  return (
    <div
      role="region"
      aria-label="Image carousel"
      aria-roledescription="carousel"
      tabIndex={0}
    >
      <KeyboardSwipeableViews
        index={index}
        onChangeIndex={setIndex}
      >
        {slides.map((slide, i) => (
          <div key={i} role="group" aria-roledescription="slide">
            {slide}
          </div>
        ))}
      </KeyboardSwipeableViews>
      <p>Use arrow keys to navigate slides</p>
    </div>
  );
}
```

--------------------------------

### Responsive Keyboard Navigation Example

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/api-reference/bindKeyboard.md

Adapts keyboard navigation axis (horizontal/vertical) based on window resize events. This ensures the carousel responds appropriately to different screen orientations.

```javascript
export function ResponsiveKeyboardCarousel() {
  const [index, setIndex] = useState(0);
  const [axis, setAxis] = useState('x');

  const KeyboardSwipeableViews = bindKeyboard(SwipeableViews);

  // Switch between horizontal and vertical on resize
  React.useEffect(() => {
    const handleResize = () => {
      const isPortrait = window.innerHeight > window.innerWidth;
      setAxis(isPortrait ? 'y' : 'x');
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <KeyboardSwipeableViews
      axis={axis}
      index={index}
      onChangeIndex={setIndex}
    >
      {slides}
    </KeyboardSwipeableViews>
  );
}
```

--------------------------------

### Full Featured Virtual Carousel with Utilities

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/api-reference/virtualize.md

Combines `virtualize` with other utilities like `autoPlay` and `bindKeyboard` for a feature-rich carousel. This example shows how to chain these higher-order components to enhance functionality, such as automatic playback and keyboard navigation.

```javascript
import { virtualize, autoPlay, bindKeyboard } from 'react-swipeable-views-utils';

export function FullFeaturedVirtualCarousel() {
  let Enhanced = virtualize(SwipeableViews);
  Enhanced = autoPlay(Enhanced);
  Enhanced = bindKeyboard(Enhanced);

  const slides = Array.from({ length: 200 }, (_, i) => `Slide ${i + 1}`);

  return (
    <Enhanced
      slideCount={slides.length}
      slideRenderer={({ index }) => (
        <div style={{ padding: 40, background: `hsl(${index * 2}, 60%, 50%)` }}>
          {slides[index]}
        </div>
      )}
      autoplay={true}
      interval={4000}
      overscanSlideBefore={2}
      overscanSlideAfter={2}
    />
  );
}
```

--------------------------------

### Example Usage of ChangeIndexMeta

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/types.md

Shows how to handle the onChangeIndex callback and differentiate between user-initiated swipes and focus-based index changes. This is useful for implementing specific logic based on how the view changed.

```jsx
<SwipeableViews
  onChangeIndex={(index, indexLatest, meta) => {
    if (meta.reason === 'swipe') {
      console.log('User swiped');
    } else if (meta.reason === 'focus') {
      console.log('User scrolled');
    }
  }}>
  {slides}
</SwipeableViews>
```

--------------------------------

### Vertical Keyboard Navigation Example

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/api-reference/bindKeyboard.md

Configures bindKeyboard for vertical navigation using the 'y' axis. Users can navigate using the up and down arrow keys. Ensure the component has a defined height for vertical scrolling.

```javascript
export function VerticalKeyboardCarousel() {
  const [index, setIndex] = useState(0);

  const KeyboardSwipeableViews = bindKeyboard(SwipeableViews);

  return (
    <KeyboardSwipeableViews
      axis="y"
      index={index}
      onChangeIndex={setIndex}
      style={{ height: '100vh' }}
    >
      <div>Page 1 - Use Up/Down arrows</div>
      <div>Page 2</div>
      <div>Page 3</div>
    </KeyboardSwipeableViews>
  );
}
```

--------------------------------

### Composing HOCs for SwipeableViews

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/docs/src/pages/getting-started/usage.md

Demonstrates the correct order for composing Higher-Order Components (HOCs) with SwipeableViews. The `virtualize` HOC must be applied first. This example uses `lodash/flowRight` for composition.

```javascript
// creates a function that invokes the given functions from right to left.
import flowRight from 'lodash/flowRight';

const EnhancedSwipeableViews = flowRight(
  bindKeyboard,
  autoPlay,
  virtualized,
)(SwipeableViews);

```

--------------------------------

### Animated Height Example with SwipeableViews

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/api-reference/SwipeableViews.md

Use the `animateHeight` prop to enable height animations. Call `updateHeight()` via the `action` prop when slide content changes dynamically to ensure correct height transitions.

```javascript
import React, { useState } from 'react';
import SwipeableViews from 'react-swipeable-views';

export function AnimatedHeightExample() {
  const [index, setIndex] = useState(0);
  const actionRef = React.useRef();

  const updateHeightOnContentChange = () => {
    // Call this when slide content changes dynamically
    if (actionRef.current) {
      actionRef.current.updateHeight();
    }
  };

  return (
    <SwipeableViews
      index={index}
      onChangeIndex={setIndex}
      animateHeight
      action={(actions) => {
        actionRef.current = actions;
      }}
    >
      <div style={{ padding: 20 }}>
        <h2>Variable Height Slide 1</h2>
        <p>This slide has dynamic content</p>
      </div>
      <div style={{ padding: 20 }}>
        <h2>Variable Height Slide 2</h2>
        <p>Much longer content here</p>
        <p>This makes the height different</p>
      </div>
    </SwipeableViews>
  );
}
```

--------------------------------

### Circular Keyboard Navigation Example

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/api-reference/bindKeyboard.md

Enables circular keyboard navigation by setting the slideCount prop. When reaching the last slide, the next arrow key press will loop back to the first slide, and vice versa.

```javascript
export function CircularKeyboardCarousel() {
  const [index, setIndex] = useState(0);
  const slides = ['A', 'B', 'C', 'D'];

  const KeyboardSwipeableViews = bindKeyboard(SwipeableViews);

  return (
    <KeyboardSwipeableViews
      index={index}
      onChangeIndex={setIndex}
      slideCount={slides.length}
    >
      {slides.map((slide, i) => (
        <div key={i}>{slide}</div>
      ))}
    </KeyboardSwipeableViews>
  );
}
```

--------------------------------

### Alternating Autoplay Direction

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/api-reference/autoPlay.md

Demonstrates how to alternate the autoplay direction between 'incremental' (forward) and 'decremental' (backward) using a state variable. This example assumes 'SwipeableViews' and 'slides' are defined elsewhere.

```javascript
export function BidirectionalCarousel() {
  const [direction, setDirection] = useState('incremental');
  const AutoPlaySwipeableViews = autoPlay(SwipeableViews);

  return (
    <div>
      <AutoPlaySwipeableViews
        autoplay={true}
        direction={direction}
        interval={3000}
      >
        {slides}
      </AutoPlaySwipeableViews>

      <button onClick={() => 
        setDirection(direction === 'incremental' ? 'decremental' : 'incremental')
      }>
        Change Direction
      </button>
    </div>
  );
}
```

--------------------------------

### Virtualization Window State

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/api-reference/virtualize.md

Represents the current state of the virtualization window, indicating which slides are active and their positions. This includes the start and stop indices of rendered slides, the position of the visible slide within the rendered set, and the actual slide index.

```typescript
{
  indexStart: number,
  indexStop: number,
  indexContainer: number,
  index: number
}
```

--------------------------------

### Stacking Utilities with bindKeyboard

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/api-reference/bindKeyboard.md

Shows how to combine bindKeyboard with autoPlay and virtualize utilities. The order of application is important for optimal results.

```javascript
let Enhanced = bindKeyboard(SwipeableViews);
Enhanced = autoPlay(Enhanced);
Enhanced = virtualize(Enhanced);

<Enhanced
  slideRenderer={({ index }) => <div>{slides[index]}</div>}
  autoplay={true}
  slideCount={slides.length}
/>
```

--------------------------------

### Invalid Children Warning Example

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/errors.md

This example shows how providing non-React elements as children triggers a development-only warning. Ensure all children are valid React elements.

```javascript
// ❌ Invalid: plain strings or invalid elements
<SwipeableViews>
  "Slide 1"                    {/* String, not element */}
  {null}                       {/* Null element */}
  {undefined}                  {/* Undefined */}
  <SlideComponent />           {/* Valid */}
</SwipeableViews>
```

```javascript
// ✅ Wrap strings in elements
<SwipeableViews>
  <div>Slide 1</div>           {/* Element wrapper */}
  <SlideComponent />           {/* Valid element */}
  {validElement && <div>{content}</div>}  {/* Conditional element */}
</SwipeableViews>
```

--------------------------------

### Uncontrolled Autoplay Example

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/api-reference/autoPlay.md

Use this snippet when the component should manage its own index state and auto-advance.

```jsx
<AutoPlaySwipeableViews autoplay={true}>
  {slides}
</AutoPlaySwipeableViews>
```

--------------------------------

### Uncontrolled SwipeableViews

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/README.md

Use this mode when the component should manage its own index internally. No additional setup is required.

```javascript
<SwipeableViews>
  {slides}
</SwipeableViews>
```

--------------------------------

### Basic Usage of virtualize HOC

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/api-reference/virtualize.md

Demonstrates how to use the virtualize HOC with SwipeableViews to render a large number of slides efficiently. It requires importing SwipeableViews and the virtualize utility, then passing slideCount and a slideRenderer function to the enhanced component.

```javascript
import SwipeableViews from 'react-swipeable-views';
import { virtualize } from 'react-swipeable-views-utils';

const VirtualizedViews = virtualize(SwipeableViews);

export function MyComponent() {
  const slides = Array.from({ length: 1000 }, (_, i) => ({
    id: i,
    content: `Slide ${i}`
  }));

  return (
    <VirtualizedViews
      slideCount={slides.length}
      slideRenderer={({ index }) => (
        <div>{slides[index].content}</div>
      )}
      overscanSlideBefore={3}
      overscanSlideAfter={2}
    />
  );
}
```

--------------------------------

### Stacking HOCs with autoPlay

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/api-reference/autoPlay.md

Demonstrates how to combine the autoPlay utility with other Higher-Order Components (HOCs) like bindKeyboard and virtualize. Import the utilities and apply them sequentially to SwipeableViews.

```javascript
import { autoPlay, bindKeyboard, virtualize } from 'react-swipeable-views-utils';

// Stack multiple HOCs
let AutoPlayableViews = autoPlay(SwipeableViews);
AutoPlayableViews = bindKeyboard(AutoPlayableViews);
AutoPlayableViews = virtualize(AutoPlayableViews);

export default AutoPlayableViews;
```

--------------------------------

### Controlled Autoplay Example

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/api-reference/autoPlay.md

Use this snippet when the parent component needs to manage the index state and coordinate auto-advances with external controls.

```jsx
const [index, setIndex] = useState(0);

<AutoPlaySwipeableViews
  index={index}
  onChangeIndex={(newIndex) => setIndex(newIndex)}
  autoplay={true}
>
  {slides}
</AutoPlaySwipeableViews>
```

--------------------------------

### Recommended Spring Configs

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/configuration.md

Provides different configurations for CSS transition timing, including fast/snappy, smooth/elegant, bouncy, and instant options. These configurations affect the `duration`, `easeFunction`, and `delay` of animations.

```javascript
{ duration: '0.25s', easeFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', delay: '0s' }
```

```javascript
{ duration: '0.5s', easeFunction: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)', delay: '0s' }
```

```javascript
{ duration: '0.6s', easeFunction: 'cubic-bezier(0.34, 1.56, 0.64, 1)', delay: '0s' }
```

```javascript
{ duration: '0s', easeFunction: 'linear', delay: '0s' }
```

--------------------------------

### Basic Swipeable Views Usage

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/api-reference/SwipeableViews.md

Demonstrates a basic implementation of SwipeableViews with state management for the active step and event handling for index changes. Enables mouse events for desktop interaction.

```javascript
import React, { useState } from 'react';
import SwipeableViews from 'react-swipeable-views';

export function MySwipeableViews() {
  const [activeStep, setActiveStep] = useState(0);

  const handleChangeIndex = (index, indexLatest, meta) => {
    console.log(`Changed from ${indexLatest} to ${index} via ${meta.reason}`);
    setActiveStep(index);
  };

  return (
    <SwipeableViews
      index={activeStep}
      onChangeIndex={handleChangeIndex}
      enableMouseEvents
    >
      <div style={{ background: '#FEA900', padding: 20 }}>
        Slide 1
      </div>
      <div style={{ background: '#B3DC4A', padding: 20 }}>
        Slide 2
      </div>
      <div style={{ background: '#6AC0FF', padding: 20 }}>
        Slide 3
      </div>
    </SwipeableViews>
  );
}
```

--------------------------------

### ComputeIndexParams Type

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/types.md

Parameters for computing the slide index during a drag operation. Includes details about the drag start, current position, and viewport dimensions.

```typescript
{
  children: ReactNode,
  startIndex: number,
  startX: number,
  pageX: number,
  viewLength: number,
  resistance: boolean
}
```

--------------------------------

### Basic Large Slide Set with Virtualize

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/api-reference/virtualize.md

Demonstrates how to use the `virtualize` utility to render a large carousel with 1000 slides. Configure `overscanSlideBefore` and `overscanSlideAfter` to control the number of slides rendered outside the viewport.

```javascript
import React from 'react';
import SwipeableViews from 'react-swipeable-views';
import { virtualize } from 'react-swipeable-views-utils';

const VirtualizedViews = virtualize(SwipeableViews);

export function LargeCarousel() {
  const TOTAL_SLIDES = 1000;

  return (
    <VirtualizedViews
      slideCount={TOTAL_SLIDES}
      slideRenderer={({ index }) => (
        <div style={{ 
          padding: 40,
          background: `hsl(${(index * 360) / TOTAL_SLIDES}, 70%, 50%)`
        }}>
          Slide {index + 1} of {TOTAL_SLIDES}
        </div>
      )}
      overscanSlideBefore={2}
      overscanSlideAfter={2}
    />
  );
}
```

--------------------------------

### ComputeIndexParams

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/types.md

Parameters used for computing the slide index during a drag operation. It includes details about the children, starting position, current position, and viewport dimensions.

```APIDOC
## ComputeIndexParams

**Parameters:**
```javascript
{
  children: ReactNode,
  startIndex: number,
  startX: number,
  pageX: number,
  viewLength: number,
  resistance: boolean
}
```

### Description
Parameters for index computation during drag.

| Property | Type | Description |
|----------|------|-------------|
| `children` | `ReactNode` | React children (used to count max index) |
| `startIndex` | `number` | Index where drag started |
| `startX` | `number` | Page X position where drag started (pixels) |
| `pageX` | `number` | Current page X position during drag (pixels) |
| `viewLength` | `number` | Width/height of visible viewport (pixels) |
| `resistance` | `boolean` | Whether to apply elastic resistance at edges |

**Used by:**
- Function: `computeIndex(params: ComputeIndexParams): { index: number, startX: ?number }`

**Return value:**
```javascript
{
  index: number,      // Computed index (may be fractional)
  startX: ?number     // New startX if hitting edge (null if none)
}
```
```

--------------------------------

### Integrating with Redux

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/README.md

Manage the SwipeableViews index within a Redux store. Use `useSelector` to get the index and `useDispatch` to dispatch actions on index changes.

```javascript
const index = useSelector(state => state.carousel.index);
const dispatch = useDispatch();

<SwipeableViews
  index={index}
  onChangeIndex={(i) => dispatch(setSlide(i))}
>
  {slides}
</SwipeableViews>
```

--------------------------------

### Example: Checking Horizontal Scrollability

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/types.md

Iterates through DOM tree shapes to determine if elements can scroll horizontally based on their scrollWidth and clientWidth. Requires getDomTreeShapes() function.

```javascript
const shapes = getDomTreeShapes(element, rootNode);
shapes.forEach(shape => {
  const canScrollX = shape.scrollWidth > shape.clientWidth;
  console.log(`${shape.element.className} can scroll horizontally: ${canScrollX}`);
});
```

--------------------------------

### File Organization Structure

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/README.md

Shows the directory structure and the purpose of each file within the project.

```text
output/
  ├── README.md                    (this file)
  ├── API-SUMMARY.md               (quick reference)
  ├── types.md                     (type definitions)
  ├── configuration.md             (config reference)
  ├── errors.md                    (errors & debugging)
  └── api-reference/
      ├── SwipeableViews.md        (main component)
      ├── core-utilities.md        (math utilities)
      ├── helper-functions.md      (DOM utilities)
      ├── autoPlay.md              (auto-advance HOC)
      ├── bindKeyboard.md          (keyboard HOC)
      └── virtualize.md            (virtual rendering HOC)
```

--------------------------------

### Conflicting AnimateHeight and Container Height

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/errors.md

This example illustrates a development-only warning when both `animateHeight: true` and `containerStyle.height` are set. The fixed height overrides animation; choose one approach.

```javascript
// ❌ Conflicting configuration
<SwipeableViews
  animateHeight={true}
  containerStyle={{ height: '500px' }}  // Fixed height overrides animation
>
  {slides}
</SwipeableViews>
```

```javascript
// ✅ Option 1: Let animateHeight control height (remove containerStyle.height)
<SwipeableViews
  animateHeight={true}
>
  {slides}
</SwipeableViews>
```

```javascript
// ✅ Option 2: Use fixed height, disable animateHeight
<SwipeableViews
  animateHeight={false}
  containerStyle={{ height: '500px' }}
>
  {slides}
</SwipeableViews>
```

--------------------------------

### Virtualization for Large Datasets

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/API-SUMMARY.md

Implements virtualization for handling large datasets (100+ slides) efficiently. Use the `virtualize` utility from `react-swipeable-views-utils` and provide `slideCount` and `slideRenderer`.

```javascript
import { virtualize } from 'react-swipeable-views-utils';

const Virtualized = virtualize(SwipeableViews);

<Virtualized
  slideCount={1000}
  slideRenderer={({ index }) => <img src={images[index]} />} 
/>
```

--------------------------------

### Vertical Swiping with SwipeableViews

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/api-reference/SwipeableViews.md

Configure vertical swiping by setting the `axis` prop to 'y'. This example assumes `slides` is an array of React components and `activeStep` and `setActiveStep` are managed state variables.

```javascript
<SwipeableViews
  axis="y"
  index={activeStep}
  onChangeIndex={setActiveStep}
>
  {slides}
</SwipeableViews>
```

--------------------------------

### Basic Autoplay Carousel

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/api-reference/autoPlay.md

Demonstrates how to use the autoPlay utility to create a basic carousel that automatically advances slides. Ensure SwipeableViews and autoPlay are imported.

```javascript
import SwipeableViews from 'react-swipeable-views';
import { autoPlay } from 'react-swipeable-views-utils';

const AutoPlaySwipeableViews = autoPlay(SwipeableViews);

export function Carousel() {
  return (
    <AutoPlaySwipeableViews
      autoplay={true}
      interval={5000}
      direction="incremental"
    >
      <div>Slide 1</div>
      <div>Slide 2</div>
      <div>Slide 3</div>
    </AutoPlaySwipeableViews>
  );
}
```

--------------------------------

### Keyboard Navigation and Autoplay

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/API-SUMMARY.md

Combines keyboard navigation with autoplay for enhanced user experience. Use `bindKeyboard` and `autoPlay` utilities from `react-swipeable-views-utils`.

```javascript
import { autoPlay, bindKeyboard } from 'react-swipeable-views-utils';

let Enhanced = bindKeyboard(SwipeableViews);
Enhanced = autoPlay(Enhanced);

<Enhanced autoplay={true} interval={4000}>
  {slides}
</Enhanced>
```

--------------------------------

### Virtualization for Large Image Sets

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/configuration.md

Handle a large set of images using the virtualize utility for efficient rendering. Configure the total slide count and specify overscan values to control rendering behavior.

```javascript
const Virtualized = virtualize(SwipeableViews);

<Virtualized
  slideCount={10000}
  slideRenderer={({ index }) => (
    <img src={imageUrls[index]} alt={`Image ${index}`} />
  )}
  overscanSlideBefore={1}
  overscanSlideAfter={1}
/>
```

--------------------------------

### Event Flow Diagram

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/README.md

Illustrates the sequence of events from user interaction to component updates.

```text
Touch/Mouse Event
  ↓
Swipe Detection (threshold: 3px)
  ↓
Drag Updates → onSwitching('move')
  ↓
Release → Calculate Final Index
  ↓
CSS Transition Animation
  ↓
onTransitionEnd() → onChangeIndex(index, previous, { reason: 'swipe' })
```

--------------------------------

### getDomTreeShapes(element, rootNode)

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/API-SUMMARY.md

Retrieves an array of scrollable ancestor elements that might interfere with swipe gestures. It analyzes the DOM tree starting from a given element up to a root node.

```APIDOC
## getDomTreeShapes(element, rootNode)

### Description
Returns array of scrollable ancestors that might conflict with swipe.

### Parameters
* **element** (HTMLElement) - The starting DOM element.
* **rootNode** (HTMLElement) - The root DOM node to search within.

### Returns
* (Array<object>) - An array of objects, where each object represents a scrollable ancestor and contains properties like `element`, `scrollWidth`, `clientWidth`, `scrollLeft`, etc.

### Example
```javascript
const shapes = getDomTreeShapes(eventTarget, rootNode);
// [{ element, scrollWidth, clientWidth, scrollLeft, ... }]
```
```

--------------------------------

### Configuring AutoPlaySwipeableViews

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/api-reference/autoPlay.md

Shows how to use the AutoPlaySwipeableViews component, passing both autoPlay-specific props and standard SwipeableViews props. Configure autoplay, interval, direction, and other view behaviors.

```javascript
<AutoPlaySwipeableViews
  // AutoPlay props
  autoplay={true}
  interval={3000}
  direction="incremental"
  
  // SwipeableViews props passed through
  axis="x"
  enableMouseEvents
  animateHeight
  resistance={false}
  onSwitching={(index, type) => {
    console.log(`Switching to ${index} via ${type}`);
  }}
>
  {slides}
</AutoPlaySwipeableViews>
```

--------------------------------

### Import SwipeableViews Core Utilities

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/API-SUMMARY.md

Import core utility functions from react-swipeable-views-core. These functions assist with calculations like modulo, index computation, and bounds checking.

```javascript
import { mod, computeIndex, constant, getDisplaySameSlide, checkIndexBounds } from 'react-swipeable-views-core';
```

--------------------------------

### computeIndex(params)

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/API-SUMMARY.md

Calculates the slide index during a drag gesture. It takes into account parameters like starting position, current page position, view length, and resistance to determine the resulting index and any associated state.

```APIDOC
## computeIndex(params)

### Description
Calculates slide index during drag. Handles resistance and boundaries.

### Parameters
* **params** (object) - An object containing the following properties:
  * **children** (Array) - The array of slides.
  * **startIndex** (number) - The starting index of the current slide.
  * **startX** (number) - The starting X coordinate of the gesture.
  * **pageX** (number) - The current X coordinate of the gesture.
  * **viewLength** (number) - The length of the viewable area.
  * **resistance** (boolean) - Whether to apply resistance to the swipe.

### Example
```javascript
const result = computeIndex({
  children: slides,
  startIndex: 1,
  startX: 100,
  pageX: 200,
  viewLength: 400,
  resistance: false
});
// { index: 1.25, startX: undefined }
```
```

--------------------------------

### Virtual Carousel with Heavy Components

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/api-reference/virtualize.md

Illustrates optimizing the rendering of slides containing computationally expensive components like charts or tables. By using `React.memo` and virtualization, these heavy components are only rendered when their corresponding slide is within the viewport or overscan area.

```javascript
export function HeavyComponentCarousel() {
  const VirtualizedViews = virtualize(SwipeableViews);

  // Component with expensive render
  const HeavySlide = React.memo(({ index }) => {
    // This component won't render if it's not in the visible window
    return (
      <div style={{ padding: 40 }}>
        <ExpensiveChartComponent dataSet={index} />
        <ExpensiveTableComponent rowsForSlide={index} />
      </div>
    );
  });

  return (
    <VirtualizedViews
      slideCount={50}
      slideRenderer={({ index }) => <HeavySlide index={index} />}
      overscanSlideBefore={1}
      overscanSlideAfter={1}
    />
  );
}
```

--------------------------------

### Custom Autoplay Interval

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/api-reference/autoPlay.md

Illustrates how to dynamically set the autoplay interval using React's useState hook and an input range slider. This allows users to control the speed of slide transitions. This example assumes 'SwipeableViews' and 'slides' are defined elsewhere.

```javascript
export function FastCarousel() {
  const [interval, setInterval] = useState(2000);

  const AutoPlaySwipeableViews = autoPlay(SwipeableViews);

  return (
    <div>
      <AutoPlaySwipeableViews
        autoplay={true}
        interval={interval}
      >
        {slides}
      </AutoPlaySwipeableViews>

      <input
        type="range"
        min="1000"
        max="10000"
        step="500"
        value={interval}
        onChange={(e) => setInterval(parseInt(e.target.value))}
      />
      <span>Interval: {interval}ms</span>
    </div>
  );
}
```

--------------------------------

### Basic Carousel with SwipeableViews

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/README.md

Demonstrates the basic usage of the SwipeableViews component to create a simple carousel. Use this for straightforward swipeable interfaces.

```javascript
import SwipeableViews from 'react-swipeable-views';

function MyCarousel() {
  const [index, setIndex] = React.useState(0);

  return (
    <SwipeableViews index={index} onChangeIndex={setIndex}>
      <div>Slide 1</div>
      <div>Slide 2</div>
      <div>Slide 3</div>
    </SwipeableViews>
  );
}
```

--------------------------------

### Get DOM Tree Shapes for Scrollable Elements

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/api-reference/helper-functions.md

Use getDomTreeShapes to traverse the DOM upwards from a target element and identify scrollable ancestors. This is useful for detecting potential conflicts with swipe gestures. It returns shape information for each scrollable ancestor found.

```javascript
import { getDomTreeShapes } from 'react-swipeable-views';

const rootNode = document.getElementById('swipeable-root');
const targetElement = event.target;

const shapes = getDomTreeShapes(targetElement, rootNode);

shapes.forEach(shape => {
  console.log(`Scrollable element:`, {
    element: shape.element,
    isHorizontallyScrollable: shape.scrollWidth > shape.clientWidth,
    isVerticallyScrollable: shape.scrollHeight > shape.clientHeight,
    scrollPosition: shape.scrollLeft
  });
});
```

--------------------------------

### Photo Gallery Configuration

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/configuration.md

Configure SwipeableViews for a photo gallery. Set the current index and handle index changes. Mouse events are enabled, and the axis is set to horizontal.

```javascript
<SwipeableViews
  index={currentIndex}
  onChangeIndex={setCurrentIndex}
  enableMouseEvents
  axis="x"
  animateHeight={false}
>
  {photos.map(photo => <img key={photo.id} src={photo.src} />)}
</SwipeableViews>
```

--------------------------------

### VirtualizedViews Rendering Configuration

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/API-SUMMARY.md

Utilize the virtualize HOC for efficient rendering of a large number of slides (100+). Configure slide count and rendering logic with overscan parameters.

```javascript
<VirtualizedViews
  slideCount={1000}
  slideRenderer={({ index }) => <div>{slides[index]}</div>}
  overscanSlideBefore={3}
  overscanSlideAfter={2}
/>
```

--------------------------------

### constant

Source: https://github.com/oliviertassinari/react-swipeable-views/blob/master/_autodocs/API-SUMMARY.md

Provides access to configuration constants used within the library, such as the elastic resistance factor and the minimum pixel threshold for detecting a swipe versus a click.

```APIDOC
## constant

### Description
Provides access to configuration constants.

### Properties
* **RESISTANCE_COEF** (number) - Elastic resistance factor.
* **UNCERTAINTY_THRESHOLD** (number) - Min pixels to detect swipe vs click.

### Example
```javascript
{
  RESISTANCE_COEF: 0.6,
  UNCERTAINTY_THRESHOLD: 3
}
```
```