react-overflow-slider v1.0.3

React Overflow Slider

A lightweight, high-performance, and responsive horizontal slider for React that works smoothly across devices, including mobile touch and MacBook touchpads. It leverages native CSS overflow-x: auto for buttery-smooth scrolling, while providing custom navigation buttons for seamless user interaction.

🔗 Links

• 📦 View on NPM
• 💻 GitHub Repository
• 🌐 Live Demo

✨ Features

• 🚀 Smooth and Native Scrolling — No JS calculations during scroll, even on touch devices.
• 🎯 Customizable — Add your own navigation buttons and styles.
• 📱 Responsive Design — Fully adapts to different screen sizes.
• 🔥 Supports Any Content — Text, images, or custom HTML elements.
• ⚡ Zero Lag — Perfect for mobile swipes and MacBook touchpads.

📦 Installation

Using npm

npm install react-overflow-slider

Using yarn

yarn add react-overflow-slider

Using pnpm

pnpm add react-overflow-slider

🚀 Quick Start

import { OverflowSlider } from 'react-overflow-slider';
import 'react-overflow-slider/dist/index.css'; // Import styles for the slider

const Example = () => {
  return (
    <OverflowSlider>
      <div>Slide 1</div>
      <div>Slide 2</div>
      <div>Slide 3</div>
    </OverflowSlider>
  );
};

⚙️ Props

📋 Examples

🔤 Text Slider

A simple text slider with dynamic tag sizes.

⚠️ Note: When using fonts with fractional widths, rounding issues may occur, causing scroll glitches. For consistent behavior across platforms, use universal fonts (e.g., system-native fonts, sans-serif).

💡 Tip: To use custom fonts while avoiding these issues, apply a transparent sans-serif font to set the correct element width, and overlay your desired font using absolute positioning. This way, the invisible font defines the size, while the visible text uses the custom font.

https://github.com/iscars/react-overflow-slider/tree/main/src/examples/tag-slider

🖼️ Image Slider

A clean image slider for showcasing images.

https://github.com/iscars/react-overflow-slider/tree/main/src/examples/image-slider

📇 Card Slider

A slider to showcase cards with titles and descriptions.

https://github.com/iscars/react-overflow-slider/tree/main/src/examples/card-slider

🛠️ Development

To begin local development:

1. Clone the repo:

git clone https://github.com/iscars/react-overflow-slider.git

2. Install dependencies:

pnpm install

3. Run the project:

pnpm dev

📄 License

This project is licensed under the MIT License.
Feel free to use, modify, and distribute it as per the license terms. 🤝