Infinite-logo-carousel NPM

Infinite Logo Carousel

A framework-agnostic infinite logo carousel using CSS and minimal JavaScript. This lightweight package allows you to create smooth, infinitely scrolling logo carousels in multiple directions.

Demo

Check out the live demo to see the Infinite Logo Carousel in action!

Features

Pure CSS implementation
Framework-agnostic (works with any JavaScript framework or vanilla JS)
Multiple scrolling directions:
- Left to Right
- Right to Left
- Top to Bottom
- Bottom to Top
Pause on hover
Customizable speed and styling
Responsive design

Installation

You can install the package via npm:

npm install infinite-logo-carousel

Or include it directly in your HTML:

<link rel="stylesheet" href="https://unpkg.com/infinite-logo-carousel@1.0.0/src/infinite-logo-carousel.css">
<script src="https://unpkg.com/infinite-logo-carousel@1.0.0/src/infinite-logo-carousel.js"></script>

Usage

Include the CSS and JS files in your project:

import 'infinite-logo-carousel/src/infinite-logo-carousel.css';
import 'infinite-logo-carousel/src/infinite-logo-carousel.js';

Create the HTML structure for your carousel:

<div class="logos" data-direction="left-to-right">
  <div class="logo_items">
    <img src="path/to/logo1.png" alt="Logo 1">
    <img src="path/to/logo2.png" alt="Logo 2">
    <!-- Add more logo images as needed -->
  </div>
  <div class="logo_items">
    <!-- Duplicate the logos for seamless scrolling -->
    <img src="path/to/logo1.png" alt="Logo 1">
    <img src="path/to/logo2.png" alt="Logo 2">
    <!-- Add more logo images as needed -->
  </div>
</div>

Initialize the carousel (if using JavaScript):

document.addEventListener('DOMContentLoaded', () => {
  new InfiniteLogoCarousel(document.querySelector('.logos'), {
    direction: 'left-to-right',
    speed: 35
  });
});

Configuration

You can configure the carousel using the following data attributes or JavaScript options:

data-direction: Sets the scrolling direction. Options are:
- left-to-right
- right-to-left
- top-to-bottom
- bottom-to-top
speed: Sets the animation duration in seconds (default is 35s).