### Install react-infinite-logo-slider via npm

Source: https://github.com/kreudev/react-infinite-logo-slider/blob/main/README.md

Installs the react-infinite-logo-slider package using npm. This is the first step to using the component in your project.

```bash
npm install react-infinite-logo-slider
```

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

### Multiple Sliders with Different Configurations (TypeScript)

Source: https://context7.com/kreudev/react-infinite-logo-slider/llms.txt

This example demonstrates setting up multiple independent Slider instances on the same page, each with distinct configurations. It shows how to control width, duration, direction (toRight), hover behavior, and blur borders for different sliders, effectively managing multiple animated lists simultaneously.

```typescript
import Slider from 'react-infinite-logo-slider'

function MultipleSliders() {
  const techLogos = [
    { src: '/tech/react.svg', alt: 'React' },
    { src: '/tech/vue.svg', alt: 'Vue' },
    { src: '/tech/angular.svg', alt: 'Angular' },
    { src: '/tech/svelte.svg', alt: 'Svelte' }
  ]

  const clientLogos = [
    { src: '/clients/acme.png', alt: 'Acme Corp' },
    { src: '/clients/techco.png', alt: 'TechCo' },
    { src: '/clients/innovate.png', alt: 'Innovate Inc' }
  ]

  return (
    <div style={{ padding: '40px 0' }}>
      {/* Fast moving tech stack slider */}
      <section style={{ marginBottom: '60px' }}>
        <h2 style={{ textAlign: 'center', marginBottom: '20px' }}>Our Tech Stack</h2>
        <Slider
          width="150px"
          duration={25}
          toRight={false}
          pauseOnHover={true}
        >
          {techLogos.map((logo, index) => (
            <Slider.Slide key={index}>
              <img src={logo.src} alt={logo.alt} style={{ width: '100px' }} />
            </Slider.Slide>
          ))}
        </Slider>
      </section>

      {/* Slow moving client slider with blur */}
      <section>
        <h2 style={{ textAlign: 'center', marginBottom: '20px' }}>Trusted By</h2>
        <Slider
          width="250px"
          duration={60}
          toRight={true}
          pauseOnHover={true}
          blurBorders={true}
          blurBorderColor={'#ffffff'}
        >
          {clientLogos.map((logo, index) => (
            <Slider.Slide key={index}>
              <img src={logo.src} alt={logo.alt} style={{ width: '180px' }} />
            </Slider.Slide>
          ))}
        </Slider>
      </section>
    </div>
  )
}

export default MultipleSliders
```

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

### Fully Configured React Infinite Logo Slider

Source: https://context7.com/kreudev/react-infinite-logo-slider/llms.txt

Shows a comprehensive example of the Slider component with all available props configured. This includes width, duration, animation direction (toRight), hover pause, and blur border effects with a specified color.

```typescript
import Slider from 'react-infinite-logo-slider'

function FullyConfiguredSlider() {
  return (
    <Slider
      width="200px"           // Width of each slide item
      duration={40}           // Animation duration in seconds (lower = faster)
      toRight={false}         // Animation direction (false = left, true = right)
      pauseOnHover={true}     // Pause animation when hovering
      blurBorders={true}      // Add blur effect at edges
      blurBorderColor={'#fff'} // Color of blur gradient
    >
      <Slider.Slide>
        <img src="/slider/logo1.png" alt="Logo 1" className='w-36' />
      </Slider.Slide>
      <Slider.Slide>
        <img src="/slider/logo2.png" alt="Logo 2" className='w-36' />
      </Slider.Slide>
      <Slider.Slide>
        <img src="/slider/logo3.png" alt="Logo 3" className='w-36' />
      </Slider.Slide>
    </Slider>
  )
}

export default FullyConfiguredSlider
```

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

### Usage Example: Infinite Logo Slider in React

Source: https://github.com/kreudev/react-infinite-logo-slider/blob/main/README.md

Demonstrates how to import and use the Slider component in a React application. It shows how to pass props like width, duration, pauseOnHover, and blurBorders, and includes examples of different slide content.

```javascript
import Slider from 'react-infinite-logo-slider'

const Component = () => {
    
    return (
        <Slider
            width="250px"
            duration={40}
            pauseOnHover={true}
            blurBorders={false}
            blurBorderColor={'#fff'}
        >
            <Slider.Slide>
                <img src="/slider/any.png" alt="any" className='w-36' />
            </Slider.Slide>
            <Slider.Slide>
                <img src="/slider/any2.png" alt="any2" className='w-36' />
            </Slider.Slide>
            <Slider.Slide>
                <img src="/slider/any3.png" alt="any3" className='w-36' />
            </Slider.Slide>
            <Slider.Slide>
                <div>
                    Other component...
                </div>
            </Slider.Slide>
        </Slider>
    )
}
                     
export default Component
```

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

### React Infinite Logo Slider: Right-to-Left Animation

Source: https://context7.com/kreudev/react-infinite-logo-slider/llms.txt

Illustrates how to configure the Slider component for a right-to-left animation with a faster speed. This example sets `toRight` to `true` and reduces the `duration` for quicker movement.

```typescript
import Slider from 'react-infinite-logo-slider'

function RightToLeftSlider() {
  return (
    <div style={{ background: '#f5f5f5', padding: '40px 0' }}>
      <Slider
        width="180px"
        duration={20}      // Faster animation (20 seconds)
        toRight={true}     // Move to the right
        pauseOnHover={true}
        blurBorders={false}
      >
        <Slider.Slide>
          <img src="/brands/react.svg" alt="React" />
        </Slider.Slide>
        <Slider.Slide>
          <img src="/brands/typescript.svg" alt="TypeScript" />
        </Slider.Slide>
        <Slider.Slide>
          <img src="/brands/nodejs.svg" alt="Node.js" />
        </Slider.Slide>
        <Slider.Slide>
          <img src="/brands/nextjs.svg" alt="Next.js" />
        </Slider.Slide>
        <Slider.Slide>
          <img src="/brands/tailwind.svg" alt="Tailwind" />
        </Slider.Slide>
      </Slider>
    </div>
  )
}

export default RightToLeftSlider
```

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

### React Infinite Logo Slider with Blur Borders

Source: https://context7.com/kreudev/react-infinite-logo-slider/llms.txt

Demonstrates the use of blur borders for the Slider component. This example enables `blurBorders` and matches `blurBorderColor` to the background for a subtle fading effect on the edges of the slider.

```typescript
import Slider from 'react-infinite-logo-slider'

function BlurBorderSlider() {
  return (
    <div style={{ background: '#1a1a1a', padding: '60px 0' }}>
      <Slider
        width="220px"
        duration={35}
        pauseOnHover={true}
        blurBorders={true}           // Enable blur borders
        blurBorderColor={'#1a1a1a'}  // Match background color
      >
        <Slider.Slide>
          <img
            src="/client-logos/client1.png"
            alt="Client 1"
            style={{ filter: 'brightness(0) invert(1)' }}
          />
        </Slider.Slide>
        <Slider.Slide>
          <img
            src="/client-logos/client2.png"
            alt="Client 2"
            style={{ filter: 'brightness(0) invert(1)' }}
          />
        </Slider.Slide>
        <Slider.Slide>
          <img
            src="/client-logos/client3.png"
            alt="Client 3"
            style={{ filter: 'brightness(0) invert(1)' }}
          />
        </Slider.Slide>
      </Slider>
    </div>
  )
}

export default BlurBorderSlider
```

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

### Mixed Content Slider with Images and Custom Components (TypeScript)

Source: https://context7.com/kreudev/react-infinite-logo-slider/llms.txt

This example demonstrates how to create a slider that includes a mix of image elements and custom-built content, such as divs with gradients and text. It showcases the flexibility of the Slider component in rendering diverse slide content and uses various props for advanced configuration like blur borders.

```typescript
import Slider from 'react-infinite-logo-slider'

function MixedContentSlider() {
  return (
    <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
      <Slider
        width="280px"
        duration={45}
        pauseOnHover={true}
        blurBorders={true}
        blurBorderColor={'#ffffff'}
      >
        <Slider.Slide>
          <img src="/tech/aws.png" alt="AWS" className="tech-logo" />
        </Slider.Slide>

        <Slider.Slide>
          <div style={{
            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
            borderRadius: '12px',
            padding: '20px',
            color: 'white',
            textAlign: 'center',
            width: '240px'
          }}>
            <h3 style={{ margin: '0 0 8px 0', fontSize: '24px' }}>500+</h3>
            <p style={{ margin: 0, fontSize: '14px' }}>Happy Clients</p>
          </div>
        </Slider.Slide>

        <Slider.Slide>
          <img src="/tech/docker.png" alt="Docker" className="tech-logo" />
        </Slider.Slide>

        <Slider.Slide>
          <div style={{
            border: '2px solid #e2e8f0',
            borderRadius: '12px',
            padding: '20px',
            textAlign: 'center',
            width: '240px'
          }}>
            <p style={{ margin: 0, fontWeight: 'bold', color: '#2d3748' }}>
              "Excellent service and support!"
            </p>
          </div>
        </Slider.Slide>

        <Slider.Slide>
          <img src="/tech/kubernetes.png" alt="Kubernetes" className="tech-logo" />
        </Slider.Slide>
      </Slider>
    </div>
  )
}

export default MixedContentSlider
```

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

### Custom Slide Component with Additional Props (TypeScript)

Source: https://context7.com/kreudev/react-infinite-logo-slider/llms.txt

This example shows how to create custom slides within the Slider component, allowing for additional HTML elements, custom styling, and event handlers like onClick. It utilizes TypeScript for type safety and demonstrates passing props to individual Slider.Slide elements.

```typescript
import Slider from 'react-infinite-logo-slider'

function CustomStyledSlider() {
  return (
    <Slider width="300px" duration={50} pauseOnHover={true}>
      <Slider.Slide
        id="slide-1"
        className="custom-slide-class"
        onClick={() => console.log('Slide 1 clicked')}
        style={{ cursor: 'pointer' }}
      >
        <div style={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          gap: '8px'
        }}>
          <img src="/partner1.png" alt="Partner 1" style={{ width: '120px' }} />
          <span style={{ fontSize: '14px', color: '#666' }}>Partner 1</span>
        </div>
      </Slider.Slide>

      <Slider.Slide
        id="slide-2"
        className="custom-slide-class"
        onClick={() => console.log('Slide 2 clicked')}
        style={{ cursor: 'pointer' }}
      >
        <div style={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          gap: '8px'
        }}>
          <img src="/partner2.png" alt="Partner 2" style={{ width: '120px' }} />
          <span style={{ fontSize: '14px', color: '#666' }}>Partner 2</span>
        </div>
      </Slider.Slide>
    </Slider>
  )
}

export default CustomStyledSlider
```

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

### Basic React Infinite Logo Slider Usage

Source: https://context7.com/kreudev/react-infinite-logo-slider/llms.txt

Demonstrates a basic implementation of the Slider component in a React application. It includes importing the Slider, defining slide items with images, and setting essential props like width, duration, and hover pause.

```typescript
import Slider from 'react-infinite-logo-slider'

function App() {
  return (
    <div className="App">
      <Slider
        width="250px"
        duration={40}
        pauseOnHover={true}
        blurBorders={false}
        blurBorderColor={'#fff'}
      >
        <Slider.Slide>
          <img src="/logos/company1.png" alt="Company 1" />
        </Slider.Slide>
        <Slider.Slide>
          <img src="/logos/company2.png" alt="Company 2" />
        </Slider.Slide>
        <Slider.Slide>
          <img src="/logos/company3.png" alt="Company 3" />
        </Slider.Slide>
        <Slider.Slide>
          <img src="/logos/company4.png" alt="Company 4" />
        </Slider.Slide>
      </Slider>
    </div>
  )
}

export default App
```

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

### Slider Component Props Configuration

Source: https://github.com/kreudev/react-infinite-logo-slider/blob/main/README.md

Illustrates the various props available for configuring the Slider component. This includes setting the width, animation duration, direction, hover behavior, and blur effects.

```javascript
<Slider
    width="200px"
    duration={40}
    toRight={false}
    pauseOnHover={false}
    blurBorders={false}
    blurBorderColor={'#fff'}
  >
    ...
  </Slider>
```

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

### TypeScript Component for Infinite Logo Slider

Source: https://context7.com/kreudev/react-infinite-logo-slider/llms.txt

A type-safe React component using TypeScript to implement an infinite scrolling logo slider. It defines interfaces for logo data and slider props, handles logo clicks with optional links, and renders images with hover effects. Dependencies include 'react-infinite-logo-slider' and 'react'.

```typescript
import Slider from 'react-infinite-logo-slider'
import { FC } from 'react'

interface Logo {
  id: string
  src: string
  alt: string
  link?: string
}

interface LogoSliderProps {
  logos: Logo[]
  width?: string
  speed?: number
}

const LogoSlider: FC<LogoSliderProps> = ({
  logos,
  width = "200px",
  speed = 40
}) => {
  const handleLogoClick = (logo: Logo): void => {
    if (logo.link) {
      window.open(logo.link, '_blank', 'noopener,noreferrer')
    }
  }

  return (
    <Slider
      width={width}
      duration={speed}
      pauseOnHover={true}
      blurBorders={true}
      blurBorderColor={'#f8f9fa'}
    >
      {logos.map((logo) => (
        <Slider.Slide
          key={logo.id}
          onClick={() => handleLogoClick(logo)}
          style={{ cursor: logo.link ? 'pointer' : 'default' }}
        >
          <img
            src={logo.src}
            alt={logo.alt}
            style={{
              width: '140px',
              height: 'auto',
              transition: 'transform 0.2s',
            }}
            onMouseEnter={(e) => {
              if (logo.link) e.currentTarget.style.transform = 'scale(1.1)'
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.transform = 'scale(1)'
            }}
          />
        </Slider.Slide>
      ))}
    </Slider>
  )
}

// Usage example
function App() {
  const partnerLogos: Logo[] = [
    { id: '1', src: '/partners/google.png', alt: 'Google', link: 'https://google.com' },
    { id: '2', src: '/partners/microsoft.png', alt: 'Microsoft', link: 'https://microsoft.com' },
    { id: '3', src: '/partners/amazon.png', alt: 'Amazon', link: 'https://amazon.com' },
    { id: '4', src: '/partners/meta.png', alt: 'Meta' }
  ]

  return (
    <div>
      <LogoSlider logos={partnerLogos} width="220px" speed={35} />
    </div>
  )
}

export default App

```

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

### Slider.Slide Component Props

Source: https://github.com/kreudev/react-infinite-logo-slider/blob/main/README.md

Shows the available props for the Slider.Slide component, which allows for passing arbitrary props to the individual slide elements, enabling custom styling and functionality.

```javascript
<Slider.Slide
    id="sliderId"
    key="any_key"
    className="awesome_classname ...",
    ...
  >
    ...
  </Slider.Slide>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.